figure docs

Figure

Getting Started

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 {
  image: {
    src: "/pattern-lab/images/placeholders/500x500.jpg",
    lazyload: false
  },
  caption: "The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark."
} only %}

Schema

Name Type Value(s) Description Default
attributes object

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

 N/A
image object
  • @bolt-components-image/image.schema.yml > Object details
    • 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
    • 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.


      Type: string
    • useAspectRatio

      Use the ratio wrapper around the image to maintain a specific image ratio. This ratio is either determined from the image, or by passing in height and width arguements.


      Type: boolean
      • TRUE OR FALSE
    • 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:

A bolt image object.

 N/A
caption string OR object OR array

A renderable figure caption.

 N/A
icon object
  • @bolt-components-icon/icon.schema.yml > Object details
    • 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-circle, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, close-open, close-solid, close, 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-off, eye, facebook-solid, facebook, field-service-gray, field-service, 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-solid, linkedin, lock, manufacturing, map-pin-solid, map-pin, marketing-gray, marketing, 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, support, system-admin, training, transportation, twitter-solid, twitter, 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

A bolt icon object.

 N/A
content string OR object OR array

A catch-all for renderable content (e.g. a string, render array, or included pattern object) to place in the figure.

 N/A

figure

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.