Use Case: Numbered Headlines
Combine the List component, Shape element, and Type element to create numbered headlines.
Important Notes:
Use the List component to create an inline list with tag
set to div
, spacing
set to small
, and nowrap
set to true
.
Pass the Shape element with a bold number as the first list item.
Pass the Type element as the second list item.
Adjust the Shape and Type element’s size
to create the desired design.
Demo
1
Numbered headline xxxlarge
1
Numbered headline xxlarge
Twig
{% set number %}
{% include '@bolt-elements-shape/shape.twig' with {
content: '<strong>1</strong>',
size: 'small',
attributes: {
class: 't-bolt-teal',
},
} only %}
{% endset %}
{% set headline %}
{% include '@bolt-elements-type/type.twig' with {
content: 'Numbered headline xxlarge',
hierarchy: 'headline',
tag: 'h4',
size: 'xxlarge',
} only %}
{% endset %}
{% include '@bolt-components-list/list.twig' with {
display: 'inline',
nowrap: true,
spacing: 'small',
items: [
number,
headline,
],
} only %}
HTML
<bolt-list display="inline" tag="div" spacing="small" nowrap>
<bolt-list-item>
<span class="e-bolt-shape"><span class="e-bolt-shape__content"><strong>1</strong></span></span>
</bolt-list-item>
<bolt-list-item>
<h1 class="e-bolt-type e-bolt-type--headline e-bolt-type--size-xxxlarge">Numbered headline</h1>
</bolt-list-item>
</bolt-list>