2.24.0

Figure

Figure Component in Bolt

Published

History: View changes
Install: yarn add @bolt/components-figure
Source code: View on Github
Dependencies: @bolt/components-icon @bolt/components-image @bolt/components-table @bolt/components-video @bolt/core-v3.x @bolt/element @bolt/lazy-queue

Overview

Figure for displaying graphics or tabular content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-figure

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. @bolt-components-image/image.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `src` Source url for image. Type: string — `alt` Alt tag for image. Type: string — `lazyload` Lazyload can boost performance by loading images on demand, instead of on initial page load. Type: boolean `true` or `false` `no_lazy` Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to `true`. Type: boolean `true` or `false` `placeholder_color` A valid CSS background color property shown while image loads. Type: string — `placeholder_image` Image path or image data shown while image loads. Type: string — `srcset` A comma seperated string of image urls and image widths, used for optimizing image loading performance. Type: string — `sizes` A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more. Type: string — `useAspectRatio` Use the `ratio` prop instead. Type: boolean `true` or `false` `ratio` Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio. Type: string, boolean — `max_width` Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%". Type: string — `width` Override the default width of the image. If no height is provided, aspect ratio will be maintained. Type: — `height` Override the default height of the image. If no width is provided, aspect ratio will be maintained. Type: — `cover` Set an image to fill its container. Type: boolean `true` or `false` `imageAttributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `valign` Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top \| center \| bottom) or via specific pixel or percent offset (ex. 30%). Type: string — `align` Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left \| center \| right) or via specific pixel or percent offset (ex. 30%). Type: string — `icon` Use the `content` prop instead. @bolt-components-icon/icon.schema.json > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `name` Icon name Type: string — `background` Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than `none` will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes! Type: string `none`, `circle`, `square` `size` Icon size. Type: string `small`, `medium`, `large`, `xlarge` `color` Icon color palette. Picking an option other than `auto` will override the default colors based on the color theme is placed within. Type: string `auto`, `teal`, `blue`, `indigo`, `yellow`, `orange`, `gray`, `green`, `white`, `pink` `video` Use the `content` prop instead. @bolt-components-video/video.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `videoId` Brightcove ID for this video. Type: string, number — `playerId` Brightcover Player ID. Type: string — `accountID` ID of the Brightcove account that owns the video. Type: string, number — `videoUuid` A unique identifying string, randomly generated if not provided. Type: string — `share_description` A custom title to use in the share overlay Type: string — `ratio` Maintain video ratio. Type: boolean — `collapsed` Should the video be collapsed on load. Type: boolean — `showMeta` Should the video show meta data. Type: boolean — `showMetaTitle` Should the video show meta title. Type: boolean — `controls` Should the video controls be available. Type: boolean — `autoplay` Should the video auto-play on load. Type: boolean — `loop` Should the video loop. Type: boolean — `on_init` The `on_init` config allows for an external Javascript function inlined on the page to add any 3rd party scripts or video plugins to a `<bolt-video>` player instance when initializing. Please see the new recommended `enabled_plugins` and `disabled_plugins` options below. Type: string — `default_plugins` An array of the default `<bolt-video>` player plugins that are globally enabled by default. Type: array `playback` `available_plugins` The built-in `<bolt-video>` player plugins that are availble to be used in any player instance without requiring the use of any extra Javascript. Type: array `playback`, `social`, `email`, `cue` `enabled_plugins` Space-separated list of built-in `<bolt-video>` plugins for Brightcove to enable. Current include `social`, `email`, `playback`, and `cue`. For example: `<bolt-video enabled-plugins="cue social email playback">`. Type: string — `disabled_plugins` Space-separated list of any built-in `<bolt-video>` plugins for Brightcove to disable. Used to opt-out of any video plugins that are enabled by default (ex. the `playback` plugin). For example: `<bolt-video disabled-plugins="playback">`. Type: string — `errorMessage` A custom message to be display upon a brigthcove error, will default to "This video didnt load correctly. Refresh page to view." is this field is left blank. Type: string — `isBackgroundVideo` Background video feature will be removed with Bolt v3.0 Type: — `table` Use the `content` prop instead. @bolt-components-table/table.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `headers` Generates top and side headers, each can contain an array of `cells`. Type: object `top` `cells` Each item represents a cell in the top header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys. [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `side` `cells` Each item represents a cell in the side header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `rows` Generates an array of rows, each can contain an array of `cells`. Type: array `cells` Each item represents a cell in a row. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `footer` Generates a table footer, can contain an array of `cells`. Type: object `cells` Each item represents a cell in the footer. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `format` Display either a regular table or a more complex numeric table. Type: string `regular` or `numeric` `borderless` Removes the vertical border in between cells. Type: boolean `true` or `false` `first_col_fixed_width` Sets the width of the first column to be as wide as the longest text. Type: boolean `true` or `false`
caption	Caption for the figure.	`string` , `object` , `array`	—	—
content	Figure contains no content. Only media and caption.		—	—

Image Figure

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

Published

Overview

Install via NPM

Usage

Schema

figure

figure media variations

Image Figure

Icon Figure

Video Figure

Table Figure

figure with web component

figure

figure docs Expand Collapse

Figure

Published

Overview

Install via NPM

Usage

Schema

figure Expand Collapse

figure media variations Expand Collapse

Image Figure

Icon Figure

Video Figure

Table Figure

figure with web component Expand Collapse

figure docs

figure

figure media variations

figure with web component