Skip to content

Standard Props for Passing Content in Twig

Mike Mai edited this page May 7, 2021 · 1 revision

Standard Props

content/items and attributes are props that every template should have, except when a UI element doesn't have content, then content or items would not be applicable.

{% include '@bolt-[category]-[name]/[name].twig' with {
  content: 'This is the content.'
  attributes: {
    'data-foo': 'bar'
  }
} only %}

Content or Items

They are the standard props for passing content.

  • When to use content: data is expected as anything (string, object, etc.)
  • When to use items: data is expected as an array

Attributes

This is the prop for passing any HTML attributes to the main container.

Situational Props

Trigger and spacing should be used when applicable.

{% include '@bolt-[category]-[name]/[name].twig' with {
  spacing: 'medium',
  trigger: 'This is the trigger.',
  content: 'This is the content.',
  attributes: {
    'data-foo': 'bar'
  }
} only %}

Trigger

Certain UI elements require a trigger to activate the display of content, this is the prop for passing such a thing.

Spacing

This is the prop for controlling spacing (margin and padding only) within a UI element's design. For example, the spacing between grid cells, list items, and the inset spacing of bands, cards, etc.

Clone this wiki locally