Docs

Approach

Use the approach block to show a featured image with one or more steps.
Overview Numbered Split Layout Arguments Background Type Elements Type Heading Type Illustration Type

Overview  

The approach block renders a featured image with one or more steps.

Preheading

Heading
Approach content. It supports multiple lines.
Approach

First Step

Content of the first card

Second Step

Content of the second card

Third Step

Content of the third card

First Step

Content of the first card

Second Step

Content of the second card

Third Step

Content of the third card
yml 
- _bookshop_name: approach
  heading:
    preheading: Preheading
    title: Heading
    content: Approach content. It supports multiple lines.
    align: start
  background:
    color: body-tertiary
    subtle: false
  illustration:
    image: /img/placeholder.png
  orientation: stacked
  icon_style: text-primary
  padding: 0
  align: start
  elements:
    - title: First Step
      icon: 1-circle
      content: Content of the first card
    - title: Second Step
      icon: 2-circle
      content: Content of the second card
    - title: Third Step
      icon: 3-circle
      content: Content of the third card

Numbered Split Layout  

Set layout to split to render the heading beside a vertically stacked list of elements instead of the card grid. Set numbered to true to render each element’s icon in a tinted circle badge instead of the plain marker. An element without an icon falls back to an auto-numbered digit glyph, but that fallback only shows a glyph when the site’s default icon family ships plain digit names (Font Awesome does); families such as Bootstrap Icons need an explicit per-element icon like 1-circle, as used below.

Preheading

Heading
Approach content. It supports multiple lines.
First Step
Content of the first step
Second Step
Content of the second step
Third Step
Content of the third step
yml 
- _bookshop_name: approach
  heading:
    preheading: Preheading
    title: Heading
    content: Approach content. It supports multiple lines.
  layout: split
  numbered: true
  elements:
    - title: First Step
      icon: 1-circle
      content: Content of the first step
    - title: Second Step
      icon: 2-circle
      content: Content of the second step
    - title: Third Step
      icon: 3-circle
      content: Content of the third step

Arguments  

The content block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Alias for _bookshop_name.
Alias for _bookshop_name.
_ordinal int Zero-based position of the bookshop component within the page’s component hierarchy.
Zero-based position of the bookshop component within the page’s component hierarchy.
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
Alignment of the headline, content, or icon. Supported values: [start, center, end].
background background, string Background style of the section.
Background style of the section.
bg_class string Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element.
Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
cols int 3 Number of grid columns.
Number of grid columns.
cover bool Flag indicating if the element should be rendered as a cover section, filling most of the viewport height. Defaults to 88vh rather than the full 100vh, so the next section peeks above the fold; see the site settings main.sectionHeight and main.maxSectionHeight.
Flag indicating if the element should be rendered as a cover section, filling most of the viewport height. Defaults to 88vh rather than the full 100vh, so the next section peeks above the fold; see the site settings main.sectionHeight and main.maxSectionHeight.
elements [] Elements yes Elements to include in the card group. Each element is rendered as a card.
Elements to include in the card group. Each element is rendered as a card.
fluid bool true Flag to set the section container to fluid design, else the section is limited to xxl.
Flag to set the section container to fluid design, else the section is limited to xxl.
heading Heading Heading of the content block, including a preheading and content element.
Heading of the content block, including a preheading and content element.
icon_rounded bool Stack the icon in a round container.
Stack the icon in a round container.
icon_style string Icon style.
Icon style.
id string Unique identifier of the current element.
Unique identifier of the current element.
illustration Illustration Featured illustration of the element.
Featured illustration of the element.
justify select start Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
layout string default Layout variant of the component. The available values depend on the specific component. Use Bootstrap RTL-safe names (e.g. “start” instead of “left”) where applicable.
Layout variant of the component. The available values depend on the specific component. Use Bootstrap RTL-safe names (e.g. “start” instead of “left”) where applicable.
link_type select button Style of the link. Supported values: [button, link].
Style of the link. Supported values: [button, link].
numbered bool
orientation select stacked Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
overlay_mode select Overlay mode of the element, overrides the site’s general configuration. Supported values: [light, dark, none].
Overlay mode of the element, overrides the site’s general configuration. Supported values: [light, dark, none].
padding int 3 Padding of the content.
Padding of the content.
section_class string Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element.
Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element.
theme select Color theme to apply to the element. Supported values: [light, dark].
Color theme to apply to the element. Supported values: [light, dark].
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Column width of the element. For embedded elements, the width is relative to the parent’s container.
wrapper string Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default.
Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default.

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
Background image with a mask to improve contrast.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
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.
Apply subtle theme colors.

Elements Type  

Name Type Required Default Comment
content string, template.HTML Section content displayed below the title.
Section content displayed below the title.
icon string, uint64 Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
image string Image to include in the content block or section heading.
Image to include in the content block or section heading.
label string Assistive label of the element.
Assistive label of the element.
link string, template.URL, url Local page reference or external hyperlink address.
Local page reference or external hyperlink address.
mode bool Flag indicating if the media asset should support color modes. If set, the element searches for images having a matching color-mode suffix such as -light or -dark.
Flag indicating if the media asset should support color modes. If set, the element searches for images having a matching color-mode suffix such as -light or -dark.
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.
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
url string, template.URL Address of the link destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
Address of the link destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.

Heading Type  

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
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].
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.
Section content displayed below the title.
preheading string Preheading of the section heading.
Preheading of the section heading.
size int 4 Display size of the headline.
Display size of the headline.
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.
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int Column width of the element. For embedded elements, the width is relative to the parent’s container.
Column width of the element. For embedded elements, the width is relative to the parent’s container.

Illustration Type  

Name Type Required Default Comment
anchor select Anchor of the image’s crop box, defaults to anchor value set in imaging section of the site configuration (usually Smart). Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart].
Anchor of the image’s crop box, defaults to anchor value set in imaging section of the site configuration (usually Smart). Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart].
caption string Caption of the carousel slide or illustration.
Caption of the carousel slide or illustration.
caption-url string, template.URL Address of the caption destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
Address of the caption destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
hook string Render hook for the element’s partial.
Render hook for the element’s partial.
icon string, uint64 Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
image string Image to include in the content block or section heading.
Image to include in the content block or section heading.
image-overlay bool Trigger to include an image overlay placeholder.
Trigger to include an image overlay placeholder.
justify select Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
mode bool Flag indicating if the media asset should support color modes. If set, the element searches for images having a matching color-mode suffix such as -light or -dark.
Flag indicating if the media asset should support color modes. If set, the element searches for images having a matching color-mode suffix such as -light or -dark.
ratio select Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. When set to auto, the original aspect ratio is used. Supported values: [1x1, 3x1, 3x2, 4x3, 16x9, 21x9, auto].
Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. When set to auto, the original aspect ratio is used. Supported values: [1x1, 3x1, 3x2, 4x3, 16x9, 21x9, auto].
width int Column width of the element. For embedded elements, the width is relative to the parent’s container.
Column width of the element. For embedded elements, the width is relative to the parent’s container.
• docs(blocks): use explicit element icons in numbered example (a01144c)
On this page
Follow Me

I work on everything coding and tweet developer memes