Figure

A Drupal-style attributes object with extra attributes to append to this component.

• —

Pass in any renderable media content via the media.content prop.

• • 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
        • academy, add, 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-atom, brand-meteor, brand-molecule, brand-operations, brand-orbit, brand-rocket, brand-satelite, brand-triangle, 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, list, 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, thumbs-up-open, time-open, training, transportation, trash, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, world-open, 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 for the figure.

• —

Figure contains no content. Only media and caption.

• —