WAI Website Assets

Headings 

<!-- Default -->
<div class="content">
    <h1> Heading <code>&lt;h1&gt;</code></h1>
</div>


<!-- H 2 -->
<div class="content">
    <h2> Heading <code>&lt;h2&gt;</code></h2>
</div>


<!-- H 3 -->
<div class="content">
    <h3> Heading <code>&lt;h3&gt;</code></h3>
</div>


<!-- H 4 -->
<div class="content">
    <h4> Heading <code>&lt;h4&gt;</code></h4>
</div>


<!-- H 5 -->
<div class="content">
    <h5> Heading <code>&lt;h5&gt;</code></h5>
</div>


<!-- H 6 -->
<div class="content">
    <h6> Heading <code>&lt;h6&gt;</code></h6>
</div>


<!-- Exdefault -->
<div class="content">
    <h1 class="ex" id="h1ex"> Heading <code>&lt;h1&gt;</code></h1>
</div>


<!-- Exh 2 -->
<div class="content">
    <h2 class="ex" id="h2ex"> Heading <code>&lt;h2&gt;</code></h2>
</div>


<!-- Exh 3 -->
<div class="content">
    <h3 class="ex" id="h3ex"> Heading <code>&lt;h3&gt;</code></h3>
</div>


<!-- Exh 4 -->
<div class="content">
    <h4 class="ex" id="h4ex"> Heading <code>&lt;h4&gt;</code></h4>
</div>


<!-- Exh 5 -->
<div class="content">
    <h5 class="ex" id="h5ex"> Heading <code>&lt;h5&gt;</code></h5>
</div>


<!-- Exh 6 -->
<div class="content">
    <h6 class="ex" id="h6ex"> Heading <code>&lt;h6&gt;</code></h6>
</div>


<!-- Apdefault -->
<div class="content">
    <h1 class="ap" id="h1ap"> Heading <code>&lt;h1&gt;</code></h1>
</div>


<!-- Aph 2 -->
<div class="content">
    <h2 class="ap" id="h2ap"> Heading <code>&lt;h2&gt;</code></h2>
</div>


<!-- Aph 3 -->
<div class="content">
    <h3 class="ap" id="h3ap"> Heading <code>&lt;h3&gt;</code></h3>
</div>


<!-- Aph 4 -->
<div class="content">
    <h4 class="ap" id="h4ap"> Heading <code>&lt;h4&gt;</code></h4>
</div>


<!-- Aph 5 -->
<div class="content">
    <h5 class="ap" id="h5ap"> Heading <code>&lt;h5&gt;</code></h5>
</div>


<!-- Aph 6 -->
<div class="content">
    <h6 class="ap" id="h6ap"> Heading <code>&lt;h6&gt;</code></h6>
</div>


<div class="content">
  <{{ name }}{% if class %} class="{{class}}" id="{{name}}{{class}}"{%- endif -%}> Heading <code>&lt;{{ name }}&gt;</code></{{ name }}>
</div>
 
/* Default */
{
  "name": "h1"
}


/* H 2 */
{
  "name": "h2"
}


/* H 3 */
{
  "name": "h3"
}


/* H 4 */
{
  "name": "h4"
}


/* H 5 */
{
  "name": "h5"
}


/* H 6 */
{
  "name": "h6"
}


/* Exdefault */
{
  "name": "h1",
  "class": "ex"
}


/* Exh 2 */
{
  "name": "h2",
  "class": "ex"
}


/* Exh 3 */
{
  "name": "h3",
  "class": "ex"
}


/* Exh 4 */
{
  "name": "h4",
  "class": "ex"
}


/* Exh 5 */
{
  "name": "h5",
  "class": "ex"
}


/* Exh 6 */
{
  "name": "h6",
  "class": "ex"
}


/* Apdefault */
{
  "name": "h1",
  "class": "ap"
}


/* Aph 2 */
{
  "name": "h2",
  "class": "ap"
}


/* Aph 3 */
{
  "name": "h3",
  "class": "ap"
}


/* Aph 4 */
{
  "name": "h4",
  "class": "ap"
}


/* Aph 5 */
{
  "name": "h5",
  "class": "ap"
}


/* Aph 6 */
{
  "name": "h6",
  "class": "ap"
}
  • Content: 
    h1, h2, h3, h4, h5, h6 {
  padding: 0;
}

h1, h2     { margin: 60px 0 20px; }
h3         { margin: 40px 0 20px; }
h4, h5, h6 { margin: 20px 0 10px; }
h1, h2, h3, h4 {
  color: var(--wai-green);
  @media print {
    color: #000;
  }
}

h1 {
  font-size: 1.5rem;
  @media (--medium) {
    font-size: 2rem;
  }
  @media (--large) {
    font-size: 2.375rem;
  }
  line-height: 1.2;
  font-weight: normal;
  margin-block-start: 0;
  & + h2 {
    margin-block-start: 0;
  }
}

h2 {
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: bold;
  border-block-end: 1px solid var(--line-grey);
  & + h3 {
    margin-block-start: 0;
  }
}

h3, h4 {
  font-size: 1.125rem;
  line-height: 1.4;
}

h3 + h4 {
  margin-block-start: 0;
}

h4 {
  font-weight: normal;
  & + h5 {
    margin-block-start: 0;
  }
}

h5 {
  font-weight: bold;
  line-height: 1.6;
  & + h6 {
    margin-block-start: 0;
  }
}

h6 {
  font-size:.875rem;
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
  &.ex:before, &.ap:before, & b {
    color: var(--w3c-blue) !important;
    font-weight: bold;
  }
}

.no-js {
  & .ex {
    counter-increment: examples;
    counter-reset: approaches;
    &:before {
      content: 'Example ' counter(examples) ': ';
    }
    &.inap {
      counter-reset: none;
    }
  }

  & .newap {
    counter-reset: approaches;
  }

  & .newex {
    counter-reset: examples;
  }


  & h2.first, & h3.first, & .newexap {
    counter-reset: examples approaches;
  }

  & .ap {
    counter-increment: approaches;
    &:before {
      content: 'Approach ' counter(approaches) ': ';
    }
  }
}
  • URL: /components/raw/headings/headings.css
  • Filesystem Path: components/headings/headings.css
  • Size: 1.6 KB

There are no notes for this item.