Docs

FAQ

4 min read • 812 words
Share via

Shows an accordion of frequently asked questions. Clicking on a question reveals the answer interactively.

Overview   Arguments   Background Type   Heading Type   Items Type  

  Important

Content blocks are a new feature that is still in beta  . The implementation is subject to change. The documentation on this website is still being worked on.

Overview  

The FAQ content block renders an accordion of frequently asked questions. Clicking on a question reveals the answer interactively.

Preheading

Heading
Section content. It supports multiple lines.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur nulla at tortor mattis pharetra.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis sit amet nulla sit amet efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam lobortis, sodales dolor eu, posuere elit.
yml 
- _bookshop_name: faq
  heading:
    preheading: Preheading
    title: Heading
    content: >-
      Section content. It supports multiple lines.
  background:
    color: primary
    subtle: true
  items:
    - title: First item
      description: |-
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
        efficitur nulla at tortor mattis pharetra.
    - title: Second item
      description: >-
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis
        sit amet nulla sit amet efficitur.
    - title: Third item
      description: >-
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam
        lobortis, sodales dolor eu, posuere elit.

Arguments  

The content block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Unique name of the bookshop component.
background background, string Background style of the section.
contrast bool Flag indicating if the element text should be rendered with high contrast.
heading Heading Heading of the content block, including a preheading and content element.
items [] Items yes Items to include in the FAQ.
justify select center Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].
Name Type Required Default
_bookshop_name string
Unique name of the bookshop component.
background background, string
Background style of the section.
contrast bool
Flag indicating if the element text should be rendered with high contrast.
heading Heading
Heading of the content block, including a preheading and content element.
items [] Items yes
Items to include in the FAQ.
justify select center
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool Apply subtle theme colors.
Name Type Required Default
backdrop string
Background image with a mask to improve contrast.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool
Apply subtle theme colors.

Heading Type  

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML Section content displayed below the title.
preheading string Preheading of the section heading.
size int 4 Display size of the headline. Supported values: [1 - 6].
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].
Name Type Required Default
align select start
Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML
Section content displayed below the title.
preheading string
Preheading of the section heading.
size int 4
Display size of the headline. Supported values: [1 - 6].
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].

Items Type  

Name Type Required Default Comment
description string, template.HTML Description of the element.
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
description string, template.HTML
Description of the element.
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
On this page: