<div class="content">
<h4> Heading <code><h4></code></h4>
</div>
<div class="content">
<{{ name }}{% if class %} class="{{class}}" id="{{name}}{{class}}"{%- endif -%}> Heading <code><{{ name }}></code></{{ name }}>
</div>
{
"name": "h4"
}
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) ': ';
}
}
}
There are no notes for this item.