Bolt Design System

Twig Usage

  {% set image %}
  {% include "@bolt-elements-image/image.twig" with {
    attributes: {
      src: "/images/placeholders/500x500.jpg",
      loading: "lazy",
    }
  } only %}
{% endset %}
{% include "@bolt-components-figure/figure.twig" with {
  media: {
    content: image
  },
  caption: "Figure caption."
} only %}

Schema

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
media	Pass in any renderable media content via the `media.content` prop.	`object`	—	`content` Figure media content, e.g image, icon, video, etc. — `image` Use the `content` prop instead. Refer to the Image Component Schema for options `icon` Use the `content` prop instead. Refer to the Icon Component Schema for options `video` Use the `content` prop instead. Refer to the Video Component Schema for options `table` Use the `content` prop instead. Refer to the Table Component Schema for options
caption	Caption for the figure.	`string` , `object` , `array`	—	—
content (deprecated)	Figure contains no content. Only media and caption.	—	—	—

Install

  npm install @bolt/components-figure

Dependencies

@bolt/components-icon

@bolt/components-image

@bolt/components-table

@bolt/components-video

@bolt/core-v3.x

@bolt/element

@bolt/lazy-queue

Figure

A media container for a complimentary graphic within an article.