Buttons
Width
Linked
Justification
Wide and full width
Wrapping
Vertical
Color
Border
Typography
Font Size
Appearance
Line height
Letter spacing
Decoration
Letter case
Spacing
Margin preset: 4
Block spacing preset: 0
Block spacing preset: 4
Block spacing preset: 7
Padding on the inner button
sep-posts
Video
Alignment
Padding and margin
Padding preset: 4
Margin preset: 5
Media & Text
Content, image media on left.
A second line to illustrate the line height.
Content, image media on left. The media is linked to the media file.
Content, video media on right.
Do not stack on mobile
Content, image media on left.
Vertical alignment
Top
Middle
Bottom
Alignment
No alignment
Wide
Full width
Media width
Media width 20
Media width 80
Color
Content, image media on left. Text color.
Content, image media on left. Text color and link color.
Content, image media on left. Background, text color and link color.
Typography
Font size
Content, image media on left.
Content, image media on left.
Content, image media on left.
Content, image media on left.
Appearance
Content, image media on left.
Content, image media on left.
Line height
Content, image media on left.
A second line to illustrate the line height.
Letter spacing
Content, image media on left.
A second line to illustrate the line height.
Decoration
Content, image media on left.
A second line to illustrate the line height.
Content, image media on left.
A second line to illustrate the line height.
Letter case
Content, image media on left.
A second line to illustrate the line height.
Content, image media on left.
A second line to illustrate the line height.
Content, image media on left.
A second line to illustrate the line height.
File
Alignment
Note: there is a spacer block above to clear the alignment.
Color
Padding and margin
Padding preset: 4
Margin preset: 4
sep-postsCover
Alignment
Content
Content
Content
Content
Content
Content
Note: there is a spacer block above to clear the alignment.
Content position
Content
Content
Content
Content
Content
Content
Content
Content
Content
Full height:
Content
Fixed background:
Content
Repeated background
Content
Fixed and repeated background
Content
Border
Content
Color
Purple overlay with different opacities:
Content
Content
Content
White overlay, 50%:
Content
Overlay, heading text color, heading background color, text color:
Heading as content
Content
Duotone
Content
Content
Content
Content
Content
Content
Content
Content
Dimensions
Padding preset: 4
Content
Margin preset: 4
Content
Block spacing preset: 0
Content
Content
Block spacing preset: 4
Content
Content
Block spacing preset: 7
Content
Content
Typography
Font size
For this example, the font size has been removed from the inner paragraph (“Content”).
Content
Content
Content
Content
Appearance
Content
Content
Line height
Content
Letter spacing
Content
Decoration
Content
Content
Letter case
Content
Content
Content
Audio
Alignment
Note: there is a spacer block above to clear the alignment.
Padding and margin
Padding preset: 4
Margin preset: 4
Gallery
Alignment
Gallery images have “Expand on click”
Color
Gallery images with border:
Gallery images with duotone:
Dimensions
Padding preset: 4
Padding preset: 4, and background color
Margin preset: 4
Block pacing preset: 0
Block pacing preset: 4
Block pacing preset: 7
Classic
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
A paragraph inside a classic block.
A quote inside a classic block
- Bulleted list
- List item
- List item
- Numbered list
- List item
- List item
Image
Alignment
Aspect ratio
Expand on click
Border
Duotone