info section docs

Info Section

A container for displaying information of a particular section on a profile or page.

Published Last updated: 5.5.0 Change log Github NPM
Twig Usage 
{% include '@bolt-components-info-section/info-section.twig' with {
  label: {
    content: 'This is an info section',
    tag: 'h2',
  },
  content: 'This is the section content.',
} only %}
 Schema
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 attributes object. Applies extra HTML attributes to the parent container.

 object —
  • —
label

Label of the info section.

 object —
    • content

      Set the label text.

      • —
    • tag

      Set the semantic heading level.

      • h1, h2, h3, h4, h5, h6
content

Content of the info section.

 any —
  • —
details_link

Render a link or button that leads to more details.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the details link element.

      • —
    • content

      Set the details link text.

      • —
open

Set the info section to open by default. This only applies when the viewport is below the medium breakpoint.

 boolean false
  • —
Install Install 
npm install @bolt/components-info-section
Dependencies @bolt/core-v3.x

info section

Basic Info Section An info section is a disclosure widget that transforms into a simple card container when the viewport is above the medium breakpoint. Important Notes: Use the open prop to set a particular info section to be open by default when the viewport is below the medium breakpoint. If there are multiple info sections, only one can be open at a time. Use the label.content prop to render a label for the section. Use the label.tag prop to set the proper heading level for the section. It defaults to h2. Use the details_link prop if a section has additional information (either on another page or in a modal). Demo

This is an info section

This is the section content. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit labore hic officia maiores ut sequi ipsam nihil repudiandae numquam quidem, molestiae amet aliquid sapiente sed odio quo aspernatur mollitia a.
More details about this section.
Twig
{% include '@bolt-components-info-section/info-section.twig' with {
  label: {
    content: 'This is an info section',
    tag: 'h3',
  },
  content: 'This is the section content. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit labore hic officia maiores ut sequi ipsam nihil repudiandae numquam quidem, molestiae amet aliquid sapiente sed odio quo aspernatur mollitia a.',
  details_link: {
    label: 'This is the details link',
    attributes: {
      type: 'button',
      'data-bolt-modal-target': '.js-modal-target',
    },
  },
} only %}

{# Optionally create a modal for more details #}
{% include '@bolt-components-modal/modal.twig' with {
  content: 'More details about this section.',
  attributes: {
    class: 'js-modal-target',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.