Bolt Design System

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 — `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.		—	—

Figure

Published

Overview

Install via NPM

Usage

Schema