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


Numbered headline xxlarge

{% 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: [
} only %}
<bolt-list display="inline" tag="div" spacing="small" nowrap>
    <span class="e-bolt-shape"><span class="e-bolt-shape__content"><strong>1</strong></span></span>
    <h1 class="e-bolt-type e-bolt-type--headline e-bolt-type--xxxlarge">Numbered headline</h1>