Altis

Author: wisdom

  • Group

    Inner blocks use content width

    A paragraph inside a group. No alignment, default justification.

    A paragraph inside a group. Wide, default justification.

    A paragraph inside a group. Wide, left justification.

    A paragraph inside a group. Wide, right justification.

    A paragraph inside a group. Full width, default justification.

    A paragraph inside a group. Full width, left justification.

    A paragraph inside a group. Full width, right justification.

    Custom content width: 200px, custom wide width: 400px, left justification

    A paragraph inside a group. No alignment, default justification.

    A paragraph inside a group. No alignment, default justification.

    Inner blocks do not use content width

    A paragraph inside a group, no alignment.

    A paragraph inside a group, wide

    A paragraph inside a group, full width

    Color

    Text color.

    Text color, link color.

    Text color, link color, background color.

    Text color, link color, background color, heading color.

    And this is the example heading inside the group

    Text color, link color, background color, heading color, button color.

    And this is the example heading inside the group

    Fill
    Outline

    Background image

    A paragraph inside a group.

    Min height is set to 300 so that the image is more visible.

    Border

    A paragraph inside a group.

    A paragraph inside a group.

    A paragraph inside a group.

    Typography

    Font size

    A paragraph inside a group.

    A paragraph inside a group.

    A paragraph inside a group.

    A paragraph inside a group.

    Appearance

    A paragraph inside a group.

    A paragraph inside a group.

    Line height

    A paragraph inside a group.

    Letter spacing

    A paragraph inside a group.

    Decoration

    A paragraph inside a group.

    A paragraph inside a group.

    Letter case

    A paragraph inside a group.

    A paragraph inside a group.

    A paragraph inside a group.

    Dimensions

    Background color added for visibility.

    Padding preset: 4

    A paragraph inside a group.

    Margin preset: 4

    A paragraph inside a group.

    Block spacing preset: 0

    A paragraph inside a group.

    A second paragraph.

    Block spacing preset: 4

    A paragraph inside a group.

    A second paragraph.

    Block spacing preset: 7

    A paragraph inside a group.

    A second paragraph.

    A paragraph inside a group.

    Min height is set to 300px.

  • 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

    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

  • 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

    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

    Wind FarmDownload
    2014-slider-mobile-behaviorCustom button text

    Alignment

    Wind FarmDownload
    Wind FarmDownload
    Wind FarmDownload
    Wind FarmDownload
    Wind FarmDownload
    Wind FarmDownload

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

    Color

    Wind FarmDownload
    Wind FarmDownload

    Padding and margin

    Padding preset: 4

    Wind FarmDownload

    Margin preset: 4

    Wind FarmDownload
  • 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:

    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

    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

    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

  • 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