figure docs

Figure

A media container for a complimentary graphic within an article.
Twig Usage 
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/square.jpg',
      loading: 'lazy',
    }
  } only %}
{% endset %}
{% include '@bolt-elements-figure/figure.twig' with {
  content: image,
  caption: 'Figure caption.'
} only %}
 Schema
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
content

Pass in any renderable content. The recommended content types are image, video, table or icon

 string , object , array —
  • —
caption

Caption for the figure.

 string , object , array —
  • —
Install Install 
npm install @bolt/elements-figure
Dependencies @bolt/core

figure

Basic Figure A media container for a complimentary graphic within an article. Demo
Light Theme
Fig. 1: This is an image.
Dark Theme
Fig. 1: This is an image.
Twig
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/16x9-640.jpg',
      loading: 'lazy',
    }
  } only %}
{% endset %}

{% include '@bolt-elements-figure/figure.twig' with {
  content: image,
  caption: 'Fig. 1: This is an image.'
} only %}
HTML
<figure class="e-bolt-figure">
  <img src="/images/placeholders/16x9-640.jpg" loading="lazy" class="e-bolt-image">
  <figcaption class="e-bolt-figure__caption">Fig. 1: This is an image.</figcaption>
</figure>

figure with content variation

Figure with Content Variation Anything of use can be passed into the content property. Demo
Fig. 2: This is a video.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
Fig. 3: This is a table.
Twig
{% set content %}
    {% set video %}
      <video-js data-account="1900410236" data-player="O3FkeBiaDz" data-embed="default" data-video-id="4892122320001" data-media-title data-media-duration controls class="c-base-video"></video-js>
    {% endset %}

    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: video,
      ratio: 'wide'
    } only %}
  {% endset %}

{% include '@bolt-elements-figure/figure.twig' with {
  content: content,
  caption: 'Fig. 2: This is a video.'
} only %}
HTML
<figure class="e-bolt-figure">
  <video-js data-account="1900410236" data-player="O3FkeBiaDz" data-embed="default" data-video-id="4892122320001" data-media-title data-media-duration controls class="c-base-video"></video-js>
  <figcaption class="e-bolt-figure__caption">Fig. 2: This is a video.</figcaption>
</figure>