Semantic <h1> tag. Visually an <h1> w/o any classes.
Semantic <h2> tag. Visually an <h2> w/o any classes.
Semantic <h3> tag. Visually an <h3> w/o any classes.
Semantic <h4> tag. Visually an <h4> w/o any classes.
{% include '@atoms/typography/headings/h1.twig' with {
heading: {
classes: 'c-heading--xxlarge',
text: 'Semantic <h1> tag. Visually an <h1> via .c-heading--xxlarge'
}
} %}
{% include '@atoms/typography/headings/h1.twig' with {
heading: {
classes: 'c-heading--xlarge',
text: 'Semantic <h1> tag. Visually an <h2> via .c-heading--xlarge'
}
} %}
{% include '@atoms/typography/headings/h1.twig' with {
heading: {
classes: 'c-heading--large',
text: 'Semantic <h1> tag. Visually an <h3> via .c-heading--large'
}
} %}
{% include '@atoms/typography/headings/h1.twig' with {
heading: {
classes: 'c-heading--medium',
text: 'Semantic <h1> tag. Visually an <h4> via .c-heading--medium'
}
} %}
{% include '@atoms/typography/headings/h2.twig' with {
heading: {
classes: 'c-heading--xxlarge',
text: 'Semantic <h2> tag. Visually an <h1> via .c-heading--xxlarge'
}
} %}
{% include '@atoms/typography/headings/h2.twig' with {
heading: {
classes: 'c-heading--xlarge',
text: 'Semantic <h2> tag. Visually an <h2> via .c-heading--xlarge'
}
} %}
{% include '@atoms/typography/headings/h2.twig' with {
heading: {
classes: 'c-heading--large',
text: 'Semantic <h2> tag. Visually an <h3> via .c-heading--large'
}
} %}
{% include '@atoms/typography/headings/h2.twig' with {
heading: {
classes: 'c-heading--medium',
text: 'Semantic <h2> tag. Visually an <h4> via .c-heading--medium'
}
} %}
{% include '@atoms/typography/headings/h3.twig' with {
heading: {
classes: 'c-heading--xxlarge',
text: 'Semantic <h3> tag. Visually an <h1> via .c-heading--xxlarge'
}
} %}
{% include '@atoms/typography/headings/h3.twig' with {
heading: {
classes: 'c-heading--xlarge',
text: 'Semantic <h3> tag. Visually an <h2> via .c-heading--xlarge'
}
} %}
{% include '@atoms/typography/headings/h3.twig' with {
heading: {
classes: 'c-heading--large',
text: 'Semantic <h3> tag. Visually an <h3> via .c-heading--large'
}
} %}
{% include '@atoms/typography/headings/h3.twig' with {
heading: {
classes: 'c-heading--medium',
text: 'Semantic <h3> tag. Visually an <h4> via .c-heading--medium'
}
} %}
{% include '@atoms/typography/headings/h4.twig' with {
heading: {
classes: 'c-heading--xxlarge',
text: 'Semantic <h4> tag. Visually an <h1> via .c-heading--xxlarge'
}
} %}
{% include '@atoms/typography/headings/h4.twig' with {
heading: {
classes: 'c-heading--xlarge',
text: 'Semantic <h4> tag. Visually an <h2> via .c-heading--xlarge'
}
} %}
{% include '@atoms/typography/headings/h4.twig' with {
heading: {
classes: 'c-heading--large',
text: 'Semantic <h4> tag. Visually an <h3> via .c-heading--large'
}
} %}
{% include '@atoms/typography/headings/h4.twig' with {
heading: {
classes: 'c-heading--medium',
text: 'Semantic <h4> tag. Visually an <h4> via .c-heading--medium'
}
} %}
{% include '@atoms/typography/headings/heading.twig' with {
heading: {
classes: 'c-heading--xxlarge',
text: 'Semantic <span> tag. Visually an <h1> via .c-heading--xxlarge, ',
aria_role: 'heading',
aria_level: '1'
}
} %}
{% include '@atoms/typography/headings/heading.twig' with {
heading: {
classes: 'c-heading--xlarge',
text: 'Semantic <span> tag. Visually an <h2> via .c-heading--xlarge, ',
aria_role: 'heading',
aria_level: '2'
}
} %}
{% include '@atoms/typography/headings/heading.twig' with {
heading: {
classes: 'c-heading--large',
text: 'Semantic <span> tag. Visually an <h3> via .c-heading--large, ',
aria_role: 'heading',
aria_level: '3'
}
} %}
{% include '@atoms/typography/headings/heading.twig' with {
heading: {
classes: 'c-heading--medium',
text: 'Semantic <span> tag. Visually an <h4> via .c-heading--medium, ',
aria_role: 'heading',
aria_level: '4'
}
} %}