2.5.1

Figure

Figure Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-figure
Source code
View on Github
Dependencies

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
  {% include "@bolt-components-figure/figure.twig" with {
  media: {
    image: {
      src: "/images/placeholders/500x500.jpg",
      lazyload: false
    },
  },
  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

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.

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>