<div class="content">
    <h1 class="ap" id="h1ap"> Heading <code>&lt;h1&gt;</code></h1>
</div>
<div class="content">
  <{{ name }}{% if class %} class="{{class}}" id="{{name}}{{class}}"{%- endif -%}> Heading <code>&lt;{{ name }}&gt;</code></{{ name }}>
</div>
{
  "name": "h1",
  "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.