List
Displays items with icons as bullets.
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Lists are great for listing things
icon:
alt: null
name: check
- inline_markdown: They can even go over <br> two lines
icon:
alt: null
name: lock-closed
- inline_markdown: Lists can include formatting like **bold** or *italic text*.
icon:
alt: null
name: briefcase
options:
gap: s
size: l
icons:
color: green
background: null
gap: xs
margin:
top: null
bottom: null
alignment: start
direction: vertical
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Properties
itemsobject array
inline_markdownstring
iconobject
namestring
altstring
optionsobject
Configuration options for the List
gapenum
none |
|
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
directionenum
Whether the list shows vertically or horizontally
horizontal |
|
vertical |
alignmentenum
The list alignment
start |
|
center |
|
end |
sizeenum
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
iconsobject
colorenum
font-color |
|
gray |
|
red |
|
orange |
|
yellow |
|
green |
|
cyan |
|
blue |
|
purple |
|
pink |
backgroundenum
none |
|
muted |
|
contrast |
gapenum
none |
|
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
marginobject
The margin around the list.
topenum
The top margin size.
none |
|
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
bottomenum
The bottom margin size.
none |
|
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
Examples
Colors
---
blocks:
- _bookshop_name: elements/list
items:
- inline_markdown: Font Color
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: font-color
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Gray
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: gray
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Red
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: red
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Orange
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: orange
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Yellow
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: yellow
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Green
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: green
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Cyan
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: cyan
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Blue
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: blue
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Purple
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: purple
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Pink
icon:
alt: Bell icon
name: bell
options:
gap: xs
size: l
icons:
color: pink
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
---
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
Sizes
---
blocks:
- _bookshop_name: elements/list
items:
- inline_markdown: Extra small
icon:
alt: Arrow pointing down and right
name: arrow-down-right
options:
gap: xs
size: xs
icons:
color: pink
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Small
icon:
alt: Arrow pointing down and right
name: arrow-down-right
options:
gap: xs
size: s
icons:
color: pink
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Medium
icon:
alt: Arrow pointing down and right
name: arrow-down-right
options:
gap: xs
size: m
icons:
color: pink
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Large
icon:
alt: Arrow pointing down and right
name: arrow-down-right
options:
gap: xs
size: l
icons:
color: pink
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Extra Large
icon:
alt: Arrow pointing down and right
name: arrow-down-right
options:
gap: xs
size: xl
icons:
color: pink
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: 2XL
icon:
alt: Arrow pointing down and right
name: arrow-down-right
options:
gap: xs
size: 2xl
icons:
color: pink
background: null
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
---
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
Backgrounds
---
blocks:
- _bookshop_name: elements/list
items:
- inline_markdown: No Background
icon:
alt: Smiley face icon
name: face-smile
options:
gap: xs
size: l
icons:
color: purple
background: none
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Muted Background
icon:
alt: Smiley face icon
name: face-smile
options:
gap: xs
size: l
icons:
color: purple
background: muted
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
- _bookshop_name: elements/list
items:
- inline_markdown: Contrast Background
icon:
alt: Smiley face icon
name: face-smile
options:
gap: xs
size: l
icons:
color: purple
background: contrast
gap: null
margin:
top: null
bottom: null
alignment: start
direction: vertical
---
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
Gaps
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Item 1
icon:
alt: null
name: bolt
- inline_markdown: Item 2
icon:
alt: null
name: bolt
- inline_markdown: Item 3
icon:
alt: null
name: bolt
options:
gap: xl
size: l
icons:
color: yellow
background: null
gap: xs
margin:
top: null
bottom: null
alignment: start
direction: vertical
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Item 1
icon:
alt: null
name: bolt
- inline_markdown: Item 2
icon:
alt: null
name: bolt
- inline_markdown: Item 3
icon:
alt: null
name: bolt
options:
gap: xs
size: l
icons:
color: yellow
background: null
gap: xl
margin:
top: null
bottom: null
alignment: start
direction: vertical
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Direction
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Use **strong, unique passwords** for every account
icon:
alt: null
name: check
- inline_markdown: Enable *two-factor authentication* where available
icon:
alt: null
name: lock-closed
- inline_markdown: Keep systems up to date with the latest patches
icon:
alt: null
name: briefcase
options:
gap: s
size: l
icons:
color: green
background: null
gap: xs
direction: vertical
alignment: start
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Use **strong, unique passwords** for every account
icon:
alt: null
name: check
- inline_markdown: Enable *two-factor authentication* where available
icon:
alt: null
name: lock-closed
- inline_markdown: Keep systems up to date with the latest patches
icon:
alt: null
name: briefcase
options:
gap: s
size: l
icons:
color: green
background: null
gap: xs
direction: vertical
alignment: start
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Alignment
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Fast
icon:
alt: null
name: check
- inline_markdown: Simple
icon:
alt: null
name: check
- inline_markdown: Effective
icon:
alt: null
name: check
options:
gap: s
size: l
icons:
color: pink
background: null
gap: xs
direction: vertical
alignment: start
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Fast
icon:
alt: null
name: check
- inline_markdown: Simple
icon:
alt: null
name: check
- inline_markdown: Effective
icon:
alt: null
name: check
options:
gap: s
size: l
icons:
color: pink
background: null
gap: xs
direction: vertical
alignment: center
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Fast
icon:
alt: null
name: check
- inline_markdown: Simple
icon:
alt: null
name: check
- inline_markdown: Effective
icon:
alt: null
name: check
options:
gap: s
size: l
icons:
color: pink
background: null
gap: xs
direction: vertical
alignment: end
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Fast
icon:
alt: null
name: check
- inline_markdown: Simple
icon:
alt: null
name: check
- inline_markdown: Effective
icon:
alt: null
name: check
options:
gap: s
size: l
icons:
color: pink
background: null
gap: xs
direction: horizontal
alignment: start
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Fast
icon:
alt: null
name: check
- inline_markdown: Simple
icon:
alt: null
name: check
- inline_markdown: Effective
icon:
alt: null
name: check
options:
gap: s
size: l
icons:
color: pink
background: null
gap: xs
direction: horizontal
alignment: center
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: elements/list
items:
- inline_markdown: Fast
icon:
alt: null
name: check
- inline_markdown: Simple
icon:
alt: null
name: check
- inline_markdown: Effective
icon:
alt: null
name: check
options:
gap: s
size: l
icons:
color: pink
background: null
gap: xs
direction: horizontal
alignment: end
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}