Figure

A media container for a complimentary graphic within an article.

Published

Last updated: 2.26.0

Change log

Github

NPM

Twig Usage

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

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

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	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

Fig. 1: This is Bill. He is awesome.

Image Figure

Fig. 1: This is an image.

Icon Figure

Fig. 2: This is an icon.

Video Figure

Fig. 3: This is a video.

Table Figure

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3
Footer	FC1	FC2	FC3

Fig. 4: This is a table.

Web Component Usage

Bolt Figure is a web component. Use the custom element <bolt-figure> to wrap your figure media and caption. The figure media must have the attribute slot="media" or be wrapped by an element with that attribute. Everything else inside the <bolt-figure> tag is considered the caption. We recommend simply using text with optional inline markup (as seen below).

This is a caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit text link.

<bolt-figure> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" slot="media"></bolt-image> This is a caption. Lorem ipsum <em>dolor sit amet</em>, consectetur adipiscing elit <a href="#">text link</a>. </bolt-figure>

figure

figure docs

Figure

A media container for a complimentary graphic within an article.

figure

figure media variations

Image Figure

Icon Figure

Video Figure

Table Figure

figure with web component

figure

figure docs Show Code Hide Code

Figure

A media container for a complimentary graphic within an article.

figure Show Code Hide Code

figure media variations Show Code Hide Code

Image Figure

Icon Figure

Video Figure

Table Figure

figure with web component Show Code Hide Code

figure docs

figure

figure media variations

figure with web component