All of the items in the accordion. Each item should contain a header and a content.

• [items]:
  • Type: object
  • Properties:
    • trigger

      Trigger content of an item.

      • Type: string , object , array
    • content

      Expandable content of an item.

      • Type: string , object , array
    • open

      Automatically expand an item on page load.

      • Type: boolean
    • inactive

      Display item trigger as an inactive element. Item content will be collapsed and the toggle icon hidden.

      • Type: boolean
    • uuid

      Unique ID for an item, randomly generated if not provided.

      • Type: string
    • open_label

      Accessible label for the open trigger to expand an item.

      • Type: string
    • close_label

      Accessible label for the close trigger to collapse an item.

      • Type: string

Allow only one section to open at a time.

• true, false

Hides the separator in between items.

• true, false

Creates a box shadow around the accordion.

• true, false

Controls the inset spacing of each item.

• none, xsmall, small, medium, large

Vertically align the accordion trigger content and trigger icon.

• top, center

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

• —

The max amount of items (action blocks) to be displayed in one row.

• 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

Vertical alignment of the content inside each action block.

• start, center, end

Removes the border in between each action block.

• true, false

Content items to populate the action blocks.

• [items]:
  • Type: object
  • Properties:
    • text
      • Type: string
    • url
      • Type: string
    • icon
      • Type: object
      • Properties:
      • name
        • —
      • size
        • —
      • background
        • —

Use max_items_per_row prop instead.

• —

Use valign prop instead.

• —

Use borderless prop instead.

• —

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

• —

Overlay opacity

• light, medium, heavy

Should an overlay be used for this background.

• enabled, disabled

Add a Bolt Background Shapes group.

• A, B, none

Alignment of shape group.

• left, right

Type of fill to use for the overlay.

• color, gradient

Where the opacity background should originate.

• • horizontal

    Currently only reverses gradient on 'left'.

    • center, left, right
  • vertical

    Currently doesn't use this value. Intended future application.

    • center, top, bottom

An array of objects to place in the background. Works with Image and Shape components. Video option is deprecated.

• [items]:
  • Type: object
  • Properties:

The shapeGroup to use to build the shapes layout.

• A, B

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

• —

Main content of the band.

• —

Pinned content of the band.

• • upper

    Pinned to the upper area of the band.

    • • content

        A pinned area can contain 1 or more items.

        • —
      • align

        Horizontal alignment of a single item.

        • start, center, end
  • lower

    Pinned to the lower area of the band.

    • • content

        A pinned area can contain 1 or more items.

        • —
      • align

        Horizontal alignment of a single item.

        • start, center, end

Controls the semantic HTML tag to use for the band's content.

• div, article, section, header, footer, nav, figure

Controls the vertical spacing of the band.

• none, xsmall, small, medium, large

If set to true, the band will take the full width of the page.

• true, false

Controls the theme of the band.

• none, xlight, light, dark, xdark

Please use pinned_content. Instructions on how to use pinned_content is on the Band with Pinned Content demo page.

• —

Please use pinned_content. Instructions on how to use pinned_content is on the Band with Pinned Content demo page.

• —

Please use content and pinned_content. Instructions on how to use pinned_content is on the Band with Pinned Content demo page.

• —

This prop has been renamed. Please use full_bleed.

• —

This prop is no longer needed. tag takes care of the semantic markup automatically.

• —

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

• —

All of the items in the block list - can have simple text oritems

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

• —

Text to appear in blockquote (Twig only). May be plain text or text wrapped in

<

p> tags.

• —

Text size.

• large, xlarge, xxlarge

Aligns items left, center, or right.

• left, center, right

Add a border.

• vertical, horizontal, none

Indent text.

• —

Width of the brower window.

• —

Hide quotation marks.

• —

Add a logo component.

• @bolt-components-logo/logo.schema.yml > Object details

  • invert

    Set to true to invert the logo colors.

    
    Type: boolean
    • —

Author of the quote.

• • name

    Author's name.

    • —
  • title

    Author's title.

    • —
  • image
    • @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, 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, 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, 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, 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
        • —

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

• —

Breadcrumb pieces.

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

• —

Text inside the button.

• —

Transforms the button text to various cases.

• uppercase, lowercase, capitalize, none

Determines the button tag type for semantic buttons

• button, submit, reset

Size of the button.

• xsmall, small, medium, large, xlarge

Style of the button determined by information hierarchy.

• primary, secondary, text

Controls the width of the button.

• auto, full, full@small

Rounds the corners of the button.

• regular, full

Horizontal alignment of items (text and icon) inside the button. Note: the values left and right are deprecated, use start and end instead.

• start, center, end

Icon data as expected by the icon component. Accepts an additional position prop that determines placement within the button.

• @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-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, 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, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, 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, 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, linkedin-solid, 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, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, 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, square
  • size

    Icon size.

    
    Type: string
    • small, medium, large, xlarge
  • color

    Icon color. Currently only support default (black) and teal.

    
    Type: string
    • teal, blue

Make the button to display only the icon and hide the text (which is still required). You are required to pass both text and icon data for this option to work.

• —

Use the align parameter instead.

• —

Use the border_radius parameter instead.

• —

Switch to using the new type prop instead.

• a, link, button, submit, reset

Html tag to wrap the button group.

• ul, ol

An array of button objects.

• [items]:
  • Type: object

    Bolt button information.

  • Properties:

An array of bolt objects.

• [items]:
  • Type: object

    Bolt component information.

  • Properties:

A string of content to place in the button group.

• —

Html tag immediately within the bolt-card element.

• div, article, section, figure

Html tag immediately within the bolt-card element.

• div, article, section, figcaption

Bolt theme.

• xlight, light, dark, xdark

Providing a URL will make the entire card link to another resource. This is a future prop and does not do anything right now.

• —

A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-carousel> tag.

• —

Array of content to include in the carousel. Note: each slide gets wrapped with a <bolt-carousel-slide> automatically.

• —

Controls the number of slides to be shown at once.

• auto, 1, 2, 3, 4

Controls the number of slides to be swiped at once.

• auto, 1

Controls the horizontal spacing between each slide.

• none, small, medium

Positions the previous and next buttons to either inside or outside of the carousel container.

• inside, outside

Makes overflowing carousel slides visible.

• —

Visually hide the previoius and next nav buttons.

• —

Allows the carousel to automatically rotate through its slides until the user interacts with it.

• true, false

Enables content to be freely scrolled and flicked without snapping to an end position. Automatically switches off the pagination and switches on the scrollbar.

• —

Accessible label for previous button.

• —

Accessible label for next button.

• —

Accessible label for the previous button when the carousel is on the first slide.

• —

Accessible label for previous button when the carousel is on the last slide.

• —

Accessible label for a single pagination bullet.

• —