2.5.1

Figure

Figure Component in Bolt

Published

History

View changes

Install

yarn add @bolt/components-figure

Source code

View on Github

Dependencies

@bolt/core

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

  {% include "@bolt-components-figure/figure.twig" with {
  media: {
    image: {
      src: "/images/placeholders/500x500.jpg",
      lazyload: false
    },
  },
  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	Media accepts either image, icon, video, or table.	`object`	—	`image` A Bolt image object. @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 OR 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 — `icon` A Bolt icon object. @bolt-components-icon/icon.schema.yml > 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`, `check`, `check-circle`, `check-solid`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`, `close`, `close-open`, `close-solid`, `cloud`, `co-browse`, `communications`, `copy-to-clipboard`, `customer-decision-hub`, `customer-onboarding`, `customer-service`, `data-integrations`, `documentation`, `download`, `email`, `energy`, `entertainment`, `exit-full-screen`, `external-link`, `eye`, `eye-off`, `facebook`, `facebook-solid`, `field-service`, `field-service-gray`, `filter`, `financial`, `full-screen`, `github`, `global`, `government`, `healthcare`, `hospitality`, `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`, `refresh`, `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` A Bolt video object. @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 OR number — `playerId` Brightcover Player ID. Type: string — `accountID` ID of the Brightcove account that owns the video. Type: string OR 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 — `isBackgroundVideo` Set to true if the video is a background. 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 — `table` A Bolt table object. @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. [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `side` `cells` Each item represents a cell in the side header. [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. [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. [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 — `first_col_fixed_width` Sets the width of the first column to be as wide as the longest text. Type: boolean —
caption	Caption for the figure.	`string` or `object` or `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 ▼

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 docs

figure

figure media variations

figure with web component