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 — `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 `academy`, `add-open`, `add-solid`, `agile`, `app-development`, `app-exchange`, `arrow-left`, `asset-data`, `asset-infographic`, `asset-interactive`, `asset-link`, `asset-media`, `asset-podcast`, `asset-presentation`, `asset-text`, `asset-video`, `bolt-logo-colored`, `brand-operations`, `calendar`, `careers`, `case-management`, `chart-bar`, `check`, `check-circle`, `check-solid`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`, `close`, `close-circled`, `close-open`, `close-solid`, `cloud`, `co-browse`, `collaboration`, `communications`, `copy-to-clipboard`, `credit-card`, `customer-decision-hub`, `customer-onboarding`, `customer-service`, `data-integrations`, `discussions`, `documentation`, `download`, `email`, `energy`, `entertainment`, `exclamation`, `exit-full-screen`, `external-link`, `eye`, `eye-off`, `face-happy`, `face-sad`, `facebook`, `facebook-solid`, `field-service`, `field-service-gray`, `file-small`, `filter`, `financial`, `full-screen`, `github`, `global`, `government`, `healthcare`, `heart`, `hospitality`, `ideas`, `industries`, `info-open`, `info-solid`, `insurance`, `integration`, `intelligent-virtual-assistant`, `java`, `knowledgebase`, `launchpad`, `life-sciences`, `linkedin`, `linkedin-solid`, `lock`, `manufacturing`, `map-pin`, `map-pin-solid`, `marketing`, `marketing-gray`, `menu`, `minus-open`, `minus-solid`, `mobility`, `more`, `omni-channel`, `partners`, `pencil`, `platform`, `podcast`, `print`, `product`, `product-delivery`, `questions`, `refresh`, `reply`, `reporting`, `retail`, `robo-auto`, `sales-automation`, `scalability`, `search`, `share`, `star-solid`, `support`, `system-admin`, `training`, `transportation`, `twitter`, `twitter-solid`, `unlock`, `upload`, `user`, `user-interface`, `video`, `vision`, `warning`, `watch`, `workforce-intelligence`, `youtube-solid` `background` Background shape. This applies only to 'xlarge' icons. Type: string `circle` or `square` `size` Icon size. Type: string `small`, `medium`, `large`, `xlarge` `color` Icon color. Currently only support default (black) and teal. Type: string `teal` or `blue` `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