figure docs

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
  {% 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 %}

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

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>