2.24.0

Figure

Figure Component in Bolt

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
Overview Usage Schema Edit this page Testing Steps
  {% 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

        • 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

        • errorMessage

          A custom message to be display upon a brigthcove error, will default to "This video didnt load correctly. Refresh page to view." is this field is left blank.

          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.

Debug Panel