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 OR object OR array
    • content

      Epanadable content of an item.

      • Type: string OR object OR array
    • open

      Automatically expand an item on page load.

      • 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 or false

Hides the separator in between items.

• true or false

Creates a box shadow around the accordion.

• true or false

Controls the inset spacing of each item.

• none, xsmall, small, medium, large

Vertically align the accordion trigger content and trigger icon.

• top or 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 or 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 or disabled

Add a Bolt Background Shapes group.

• A, B, none

Alignment of shape group.

• left or right

Type of fill to use for the overlay.

• color or 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.

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

The shapeGroup to use to build the shapes layout.

• A or 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.

• —

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 or items

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.

• —

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 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 OR 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
        • —

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 semantic HTML tag for the button.

• a, link, 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 or 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.yml > 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, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-open, close-solid, 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, eye-off, 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 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

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.

• —

Html tag to wrap the button group.

• ul or 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.

• —