Fluid Typography

Fluid typography is the adaptation of font sizes with changes in viewport width. As a result, fonts can smoothly scale between a minimum and maximum size— creating uniformity and optimal communication.

Text – XS

Text – S

Text – M

Text – L

Text – XL

Text – XXL

Text – XXXL

Text – XXXXL

Text – Huge

Text – Gigantic

Text – Colossal

Fluid Headers

Heading One

Heading Two

Heading Three

Heading four

Heading Five

Heading Six

Preformatted Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras turpis dui, tincidunt ac dui a, iaculis pretium sapien. Suspendisse blandit dolor at lorem consectetur finibus. Integer volutpat nisi libero, ut semper tellus aliquet id. In ut turpis in dolor imperdiet fringilla. Cras eu magna imperdiet, efficitur sem in, convallis felis. Vivamus orci justo, accumsan eget interdum non, tempus eget eros. Nam finibus lorem non feugiat pellentesque. Vestibulum sit amet magna non purus molestie commodo. Quisque aliquam erat vitae dignissim molestie. Maecenas a egestas erat.

Nulla facilisi. Curabitur tempor orci id nunc luctus finibus in vel ipsum. Suspendisse malesuada erat sit amet nunc facilisis, non tincidunt nibh vestibulum. Praesent dolor ipsum, laoreet in viverra sed, consectetur et massa. Nunc tincidunt eleifend purus id pellentesque. Nulla facilisi. Quisque vel ultricies ipsum. Mauris egestas est aliquam volutpat euismod. Etiam interdum pretium magna, lobortis dapibus sapien placerat sit amet. Sed lorem metus, tincidunt non aliquam ut, eleifend vel orci. Nullam lobortis sollicitudin ipsum, ac laoreet lacus tristique ut. Phasellus pellentesque tincidunt tellus, eget sodales turpis euismod vel.

Nam arcu tortor, aliquam nec augue eu, ornare sagittis felis. Cras faucibus sed ex eget sagittis. Cras eget erat ligula. Proin viverra id sapien eu efficitur. Donec nec orci nulla. Duis ornare quam mi, in tempor lorem sagittis vel. Fusce eu ullamcorper lectus. Sed quis massa vel diam interdum consectetur. In hac habitasse platea dictumst. Donec accumsan gravida tellus. Phasellus ultrices orci in odio sollicitudin, sit amet scelerisque mi elementum. Vivamus venenatis rutrum leo ac elementum. Quisque ornare malesuada ullamcorper. 

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.
  • Condimentum euismod aenean
  • Purus commodo ridiculus.
  • Nibh commodo vestibulum.
• Cras justo odio, dapibus ac facilisis in.

• Nullam id dolor id nibh ultricies vehicula ut id elit.
• Donec ullamcorper nulla non metus auctor fringilla.
• Cras justo odio, dapibus ac facilisis in.

• Nullam id dolor id nibh ultricies vehicula ut id elit.
• Donec ullamcorper nulla non metus auctor fringilla.
• Cras justo odio, dapibus ac facilisis in.

• Nullam id dolor id nibh ultricies vehicula ut id elit.
• Donec ullamcorper nulla non metus auctor fringilla.
• Cras justo odio, dapibus ac facilisis in.

Verse

This is an example of the core Gutenberg verse block.

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.

Blockquote Default

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.

Blockquote Simple

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

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.

Audio

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.

Columns

Pull Quote

Video Block