22px/36px, Color: #323232. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.


Heading One, 48px/60px, Color: #323232

Heading Two, 48px/60px, Color: #323232

Heading Three, 42px/52px, Color: #0571c6

Heading Four, 32px/44px, Color: #323232

Heading Five, 24px/35px, Color: #0571c6
Heading Six, 22px/32px, Color: #323232

Preformatted Block

The Road Not Taken, by Robert Frost

Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;
Then took the other, as just as fair,
And having perhaps the better claim,
Because it was grassy and wanted wear;
Though as for that the passing there
Had worn them really about the same,
And both that morning equally lay
In leaves no step had trodden black.
Oh, I kept the first for another day!
Yet knowing how way leads on to way,
I doubted if I should ever come back.
I shall be telling this with a sigh
Somewhere ages and ages hence:
Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.

...and heres a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;

Ordered List

  1. Nullam id dolor id nibh ultricies vehicula ut id elit.
  2. Donec ullamcorper nulla non metus auctor fringilla.
    1. Condimentum euismod aenean.
    2. Purus commodo ridiculus.
    3. Nibh commodo vestibulum.
  3. Cras justo odio, dapibus ac facilisis in.

Unordered List

  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Donec ullamcorper nulla non metus auctor fringilla.
    • Nibh commodo vestibulum.
    • Aenean eu leo quam.
    • Pellentesque ornare sem lacinia.
  • Cras justo odio, dapibus ac facilisis in.

Verse

This is an example of the core Gutenberg verse block.

A block for haiku? 
Why not?
Blocks for all the things!

Separator

Here are examples of the three separator styles of the core Gutenberg separator block.




Table

Here is an example of the core Gutenberg table block. 

EmployeeSalaryPosition
Jane Doe
$100kCEO
John Doe$100kCTO
Jane Bloggs$100kEngineering
Fred Bloggs$100kMarketing

Latest Posts, List View

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 

Latest Posts, Grid View

And now for the Grid View. The Latest Posts block also displays at wide and full width alignments, so be sure to check those styles as well.


Blockquote

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.

Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio.

Rich Tabor

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.


Alternate Blockquote

The alternate block quote style can be tarageted using the .wp-block-quote.is-large. CSS selector. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Rich Tabor

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.


Audio

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Center aligned:

An example of an Audio Block caption

Curabitur blandit tempus porttitor. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.


Buttons

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Center aligned

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius.


Categories


Archives


Columns

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.


Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Fusce dapibus, tellus ac cursus commodo, tortor mauris condim entum nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condim entum nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condim entum nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condim entum nibh.


Pull Quotes

Here is an example of the core pull quote block, set to display centered. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere est at lobortis.

Rich Tabor, ThemeBeans.com

Wide aligned

Here is an example of the core pull quote block, set to display with the wide-aligned attribute, if the theme allows it. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Here we have a left-aligned pullquote.

Rich Tabor

Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.

Here we have a right-aligned pullquote.

Rich Tabor

Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.


Image Block

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.

And an image with a caption

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

This image was resized in Gutenberg.

Left aligned: dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

This one is captioned

Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus.


Video Block

Lets check out the positioning and styling of the video core block. We will check the wide and full alignments too.

Cover Image Block

Check out the positioning and styling of the cover image core block. We will check the wide and full alignments, as well as left/right.

Left Aligned Cover Image

Left aligned: dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Right Aligned Cover Image

Right aligned: scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Center aligned:

Center Aligned Cover Image


Gallery Blocks

Let us check out the positioning and styling of the gallery blocks.

Two Column Gallery

Below we have a Gallery Block inserted with two columns and two images.

Three Column

Below we have a Gallery Block inserted with three columns and three images.

Four Column

Below we have a Gallery Block inserted with four columns and four images.

Five Column

Below we have a Gallery Block inserted with five columns and five images.

Four Column, Five Images

Let us switch things up a bit. Now we have a Gallery Block inserted with four columns and five images.

Three Column, Five Images

Now we have a Gallery Block inserted with three columns and five images.

Below you will find a Gallery Block inserted with two columns and five images.

Two Column, Five Images

Three Column, Four Images

Below you will find a Gallery Block inserted with three columns and four images.


Download Block

Default Alignment (Also left alignment)

Download MP4, 3.1MB

Young man using smartphone for navigation

Download

Right Alignment

This alignment works best in a body of text

Download MP4, 3.1MB

Young man using smartphone for navigation

Download

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in arcu finibus, ultrices nisl quis, posuere dui. Proin mollis dapibus libero nec ultricies. Vivamus quis maximus turpis, eget porttitor erat. Maecenas non luctus eros. Mauris mattis mi magna, quis consectetur libero cursus at. Pellentesque tortor orci, dictum blandit sodales nec, vehicula ac ipsum. Donec tincidunt est sit amet sem maximus, quis laoreet nisi venenatis. Integer gravida, lorem eu cursus bibendum, felis erat tincidunt est, id pulvinar orci ipsum non risus. Etiam tempus purus ac purus imperdiet hendrerit. Donec eget erat hendrerit, venenatis nisl nec, scelerisque eros. Fusce ut dictum dui, eget dignissim massa. Aliquam eu aliquet neque, eget tempus est. Nulla vitae tortor sit amet nulla interdum dictum a vitae augue. Quisque lacus ipsum, pharetra eu dui sit amet, tempor dictum sapien. Morbi dignissim lectus sit amet quam fermentum pretium.

Aliquam mauris erat, pretium vel finibus ac, ultricies cursus sapien. Curabitur suscipit rutrum placerat. Quisque luctus vestibulum dolor quis ornare. Mauris lacinia malesuada elementum. Quisque pharetra fermentum porta. Praesent ut erat fringilla, iaculis orci sed, ullamcorper odio. Quisque et nisi at tortor eleifend tempor. Sed leo lacus, blandit eu pellentesque eu, fermentum id eros. Aenean fringilla metus felis, vel sollicitudin ipsum commodo nec. In et placerat justo, id feugiat neque. Nam eleifend blandit tempor. Maecenas vitae augue varius, feugiat ipsum sit amet, volutpat nibh.

Wide Alignment

Download MP4, 3.1MB

Young man using smartphone for navigation

Download

Featured Content Listing Block

Displays 4 featured content that is tagged with the specified term


Featured Post Three Up

16:9 Aspect Ratio for the images

Blog

Optical devices and vision rehabilitation may help you adapt

May 19, 2021

See Better With Low-Vision Solutions About 4 million older adults are believed to have low vision–vision impairment that can’t be corrected with glasses or contact…


Image Promo

1:1 Aspect Ratio images.
Image Size of 1800px or more is best

Default Mode

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Aliquam in arcu finibus, ultrices nisl quis, posuere dui. Proin mollis dapibus libero nec ultricies. Vivamus quis maximus turpis, eget porttitor erat. Maecenas non luctus eros.

Dark Mode

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Aliquam in arcu finibus, ultrices nisl quis, posuere dui. Proin mollis dapibus libero nec ultricies. Vivamus quis maximus turpis, eget porttitor erat. Maecenas non luctus eros.


Horizontal Card (Image w/ CTA Button)

1:1 Image Aspect Ratio

Private: Block Catalog [Demo Page]

[Intro Text] At Lighthouse Guild, our rehabilitation services can help restore your function and quality of life. Our multidisciplinary team offers physical therapy and occupational…

CLICK HERE
Young volunteer with a elderly client

Multi-Image Promo

16:9 Aspect Ratio for the large image

1:1 Aspect Ratio for the small diamond image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam in arcu finibus, ultrices nisl quis, posuere dui. Proin mollis dapibus libero nec ultricies. Vivamus quis maximus turpis, eget porttitor erat. Maecenas non luctus eros.

  • Link 1

    Aliquam mauris erat, pretium vel finibus ac, ultricies cursus sapien. C

  • Link 2

    Aliquam mauris erat, pretium vel finibus ac, ultricies cursus sapien. C

  • Link 3

    Aliquam mauris erat, pretium vel finibus ac, ultricies cursus sapien. C


Person Listing

1:1 Aspect Ratio


Quote with Image

1:1 Aspect Ratio

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.

Magna Sed, diam ed diam eget risus varius eget.
Lori, client

Related Content

16:9 Aspect Ratio regardless of alignment

Default Alignment

Wide Alignment

Full width Alignment


Stat Blocks

33%

Lorem ipsum dolor sit amet,

Two Columns

33%

Lorem ipsum dolor sit amet,

33%

Lorem ipsum dolor sit amet,


Three-up Card

16:9 Image Aspect Ratio

Join our Mission

Lighthouse Guild is dedicated to providing exceptional services that inspire people who are visually impaired to attain their goals.