Bolt Design System

Each pinned area (upper and lower) can have 1 or more items, spacing will be evenly distributed

upper pinned 1

upper pinned 2

upper pinned 3

This Is a Headline

This Is a Subheadline

lower pinned 1

lower pinned 2

lower pinned 3

This Is a Headline

This Is a Subheadline

When there is only 1 item, you can set the align prop to your liking (start, center, end)

This Is a Headline

This Is a Subheadline

Note: please convert the deprecated items prop to the new pinned_content prop.

Deprecated items prop usage

{% include '@bolt-components-band/band.twig' with {
  content: content,
  items: [
    {
      position: {
        align: 'end',
        valign: 'center',
        row_start: 1,
        column_start: 1,
        column_end: 12,
      },
      content: pinned_share,
    },
  ]
} only %}

New pinned_content prop usage

{% include '@bolt-components-band/band.twig' with {
  content: content,
  pinned_content: {
    upper: [
      {
        content: pinned_share,
        align: 'end',
      },
    ],
  }
} only %}