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="grid">
<div class="lighter">lighter</div>
<div class="color">main color</div>
<div class="darker">darker</div>
</div>

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

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

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

);

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

<div class="container">
  <nav id="utility-nav">
        <div class="item-list"><ul><li id="utility-search" class="switch first" title="Search"><a href="/en/search" class="expand" onclick="return false;">Search</a></li>
<li id="utility-account" class="switch" title="Accounts"><a href="https://sso.qa.redhat.com/auth/realms/redhat-external/protocol/saml/clients/legacy-idp-servlets" class="expand" onclick="return false;">Log in</a></li>
<li id="utility-globe" class="switch last" title="Global Preferences"><a href="/en/about/global" class="expand" onclick="return false;">English</a></li>
</ul></div>      </nav>
</div>

<div class="container">
        <div class="logo-mobile-wrap">

starryeyez024

<br/>
<p class="lighter">
  hello
</p>
<p class="normal">
  hello
</p>
<p class="bold">
  hello
</p>

starryeyez024

<br/>
<div style="width:312px;background:#eee">

<div class="cta">
<a href="#">hello world fsda fdsa dsaf dsa</a>
</div>

</div>

starryeyez024

<br/>
<div class="test">
  code
</div>

starryeyez024

<br/>
<p>
  <a>regular link</a>
</p>
<div class="">
  <a>no class</a>
</div>
<div class="primary">
  <a>primary</a>
</div>