Category: Media

Blocks in the media category

  • 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

  • Media & Text

    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

    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.

  • Cover

    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:

    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

    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)
  • Gallery

    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

  • Image

    Alignment

    Align left
    Center
    Align right
    Wide
    Full width
    Rounded variation

    Aspect ratio

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

    Expand on click

    Border

    Duotone