Skip to content

docs(blocks): add numbered split layout example for approach #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
markdumay merged 2 commits into from
Jul 28, 2026
Merged

docs(blocks): add numbered split layout example for approach #131

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d93889
docs(blocks): add numbered split layout example for approach
markdumay Jul 28, 2026
a01144c
docs(blocks): use explicit element icons in numbered example
markdumay Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions content/blocks/approach.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,42 @@ The `approach` block renders a featured image with one or more steps.
{{< /example-bookshop >}}
<!-- markdownlint-enable MD037 -->

### 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.

<!-- markdownlint-disable MD037 -->
{{< example-bookshop lang="bookshop" >}}

```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
```

{{< /example-bookshop >}}
<!-- markdownlint-enable MD037 -->

## Arguments

The content block supports the following arguments:
Expand Down