starryeyez024

<div class="option">
<h1>Basic demo</h1>
<h2>Content component:</h2>
<div class=foo>
  I'm foo, a content component <a href="#">with a link</a>
</div>

<h2>Content component in container: </h2>
<div class=darkest-card>
  <div class=foo>

starryeyez024

// ----
// libsass (v3.5.4)
// ----

$pfe-colors: (
  text:     #222,
  ui-link:  #06c,
  accent:   #c00,

);

starryeyez024

// ----
// libsass (v3.5.4)
// ----

:root {
  // update colors as a set!! or you're in trouble mister
  --pfe-theme--color--surface--accent: #ee0000; //background
  --pfe-theme--color--surface--accent-harmony: dark-teal; //background-alt
  --pfe-theme--color--surface--accent--text: #ffffff;
  --pfe-theme--color--surface--accent--text--alt: light-gray;

starryeyez024

<br/>
<div class="grid">
<div class="lighter">lighter</div>
<div class="color">main color</div>
<div class="darker">darker</div>
</div>

starryeyez024

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

starryeyez024

<br/>
<div class="headline1">Headline hello world, 400 weight</div>
<div class="headline2">Headline hello world, 500 weight</div>
<div class="headline3">Headline hello world, 600 weight</div>
<div class="headline4">Headline hello world, 700 weight</div>
<div class="headline5">Headline hello world, 800 weight</div>
<div class="headline6">Headline hello world, 900 weight</div>

starryeyez024

<div class="container">
  <div class="logo">Logo</div>
  <div class="links">
    <ul>
      <li>Try</li>
      <li>Learn</li>
      <li>Buy</li>
    </ul>
  </div>
</div>

starryeyez024

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.6.2)
// ----

.parent {
   &-child {
     color:red;
     & + & {

starryeyez024

<div class="rh-divider-content" data-rh-layout="busy-card-gallery">
  <!-- Subpattern | training_course -->
  <div class="rh-card--layout" data-rh-background="white" data-rh-theme="light" data-rh-bg-align="cover" data-rh-layout="min-stacked" data-eq-pts="" data-rh-justify="justify" data-rh-card="sections" data-rh-border="thin gray" data-eq-state="xs-divider lg-divider"><header class="rh-card-header" data-rh-background="accent-teal" data-rh-theme="dark"><div class="rh-card-header--component"><h3 class="rh-card-header-title-small">Primary bg color</h3></div></header><div class="rh-card-content" data-rh-layout="stacked"><article class="rh-featured-event-teaser--component"><h3 class="rh-featured-event-teaser-headline-secondary"><a href="https://web-dev-drupal-sshell.dev.a1.vary.redhat.com/en/us183944-training-course-listing-training-box-sub-pattern-3#">Sample Course </a></h3><p class="rh-featured-event-teaser-location-secondary">
                Cras sed luctus libero. Donec id orci quis justo tincidunt placerat.

starryeyez024

<br/>
<div class="wrapper" data-rh-layout="card-gallery">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<br/>
<div class="wrapper2" data-rh-layout="box-gallery">
  <div class="box">1</div>
  <div class="box">2</div>