This is a call to action

This is what you need to do

Author: ken

Posted on
CategoriesDesign

Buttons

Width

25%
50%
75%
100%

Linked

Fill, no link
Outline, no link
Fill, linked
Outline, linked

Justification

Fill, linked, justify items left
Outline, linked
Fill, linked, justify items center
Outline, linked
Fill, linked, justify items right
Outline, linked
Fill, linked, space between
Outline, linked

Wide and full width

Fill, linked, wide width
Outline, linked
Fill, linked, full width
Outline, linked

Wrapping

Fill, linked, allow wrapping
Outline, linked
Fill, linked
Outline, linked
Fill, linked
Outline, linked
Fill, linked, do not allow wrapping
Outline, linked
Fill, linked
Outline, linked
Fill, linked
Outline, linked

Vertical

Fill, linked
Outline, linked
Fill, linked
Outline, linked

Color

Fill, linked
Outline, linked
Fill, linked, gradient
Outline, linked, gradient

Border

Fill, linked, border radius 0, border width 2px
Outline, linked, border radius 0, border width 2px
Fill, linked, border radius 8, width 5px
Outline, linked, border radius 8, width 5px
Fill, linked, border radius 20, width 20
Outline, linked, border radius 8, width 20

Typography

Font Size

Fill, linked
Outline, linked
Fill, linked
Outline, linked
Fill, linked
Outline, linked
Fill, linked
Outline, linked

Appearance

Fill, linked
Outline, linked
Fill, linked
Outline, linked

Line height

Fill, linked
Outline, linked

Letter spacing

Fill, linked
Outline, linked

Decoration

Fill, linked
Outline, linked
Fill, linked
Outline, linked

Letter case

Fill, linked
Outline, linked
Fill, linked
Outline, linked
Fill, linked
Outline, linked

Spacing

Margin preset: 4

Fill, linked
Outline, linked

Block spacing preset: 0

Fill, linked
Outline, linked

Block spacing preset: 4

Fill, linked
Outline, linked

Block spacing preset: 7

Fill, linked
Outline, linked

Padding on the inner button

Fill, linked, padding preset 4
Outline, linked, padding preset 4
Posted on
CategoriesMedia

Video

Without playback controls
With custom caption
Autoplay, muted, loop, playback controls.
Play inline
With poster image

Alignment

None: Default width
Wide
Full width
Left align
Center
Right align

Padding and margin

Padding preset: 4

Margin preset: 5

Posted on
CategoriesMedia

Media & Text

Brazil Beach

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.

Posted on
CategoriesMedia

Cover

Brazil Beach

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

Posted on
CategoriesMedia

Audio

St. Louis Blues, by Original Dixieland Jazz Band with Al Bernard (public domain)

Alignment

St. Louis Blues, by Original Dixieland Jazz Band with Al Bernard (public domain)
St. Louis Blues, by Original Dixieland Jazz Band with Al Bernard (public domain)
St. Louis Blues, by Original Dixieland Jazz Band with Al Bernard (public domain)
St. Louis Blues, by Original Dixieland Jazz Band with Al Bernard (public domain)
St. Louis Blues, by Original Dixieland Jazz Band with Al Bernard (public domain)

Note: there is a spacer block above to clear the alignment.

Padding and margin

Padding preset: 4

St. Louis Blues, by Original Dixieland Jazz Band with Al Bernard (public domain)

Margin preset: 4

St. Louis Blues, by Original Dixieland Jazz Band with Al Bernard (public domain)
Posted on
CategoriesMedia

Gallery

Brazil Beach
Gallery caption
Single image caption
Another image caption
Gallery caption
Three columns
Four columns

Alignment

Wide
Full width
Left aligned
Center
Right aligned

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

Posted on
CategoriesText

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
  1. Numbered list
  2. List item
    1. List item

Posted on
CategoriesMedia

Image

Alignment

Align left
Center
Align right
Wide
Full width
Rounded variation

Aspect ratio

Original
1:1
4:3
3:4
3:2
2:3
16:9
9:16

Expand on click

Border

Duotone