Columns
Column numbers and widths
Background colors have been added for visibility:
One column
Two columns, 50/50
Column two
Two columns, one third
Two thirds
Two columns, two thirds
One third
Three columns
Column two
Column three
Three columns, 25
50
25
Custom column numbers
One
Two
Three
Four
Five
Six
Do not stack on mobile
Two columns, 50/50
Column two
Column three
Alignment
No alignment, default. Column one
Column two
Column three
Wide. Column one
Column two
Column three
Full width. Column one
Column two
Column three
Align middle
No alignment, default. Column one
Column two
Some more text, to showcase alignments.
The default alignment is top.
Column three
Align bottom
No alignment, default. Column one
Column two
Some more text, to showcase alignments.
The default alignment is top.
Column three
Color
Background color on columns only:
Two columns, 50/50
Column two
Column three
Background color on both columns and column:
Two columns, 50/50
Column two
Column three
Border
Border on columns only:
Column one
Column two
Column three
With border radius:
Column one
Column two
Column three
Note that border radius conflicts with the background on the inner blocks, this is a known issue (WordPress 6.4)
Column one
Column two
Column three
Border on the inner column only:
Note that border radius on the inner columns is not supported (WordPress 6.4)
Column one
Column two
Column three
Border on both the columns and the inner column:
Column one
Column two
Column three
Note that border radius conflicts with the border on the inner blocks, this is a known issue (WordPress 6.4)
Column one
Column two
Column three
Typography
Font size
Column one
Column two
Column three
Column one
Column two
Column three
Column one
Column two
Column three
Column one
Column two
Column three
Appearance
Column one
Column two
Column three
Column one
Column two
Column three
Line height
Column one
Column two
Column three
Letter spacing
Column one
Column two
Column three
Decoration
Column one
Column two
Column three
Column one
Column two
Column three
Letter case
Column one
Column two
Column three
Column one
Column two
Column three
Column one
Column two
Column three
Spacing
Padding preset: 4
Column one
Column two
Column three
Margin Preset: 4
Column one
Column two
Column three
Block spacing preset: 0
Column one
Column two
Column three
Block spacing preset: 4
Column one
Column two
Column three
Block spacing preset: 7
Column one
Column two
Column three
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
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
Cover
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