This style guide is full of dummy content created using the editor in WordPress 5.0, code-named Gutenberg.  The purpose of this page is to show you what all the default HTML elements and default WordPress blocks will look like using this theme.

H1 Cover Image

Just in case you want to add an H1 heading to the page it’ll look like the heading above. It has long been bad SEO practice to have multiple H1’s on a page, usually, an H1 is only used for the page title.

H2 Quote and Pullquotes

H2 headings get used a lot for major sections of your pages. Below this paragraph, you will find the new Quote Block which outputs an HTML blockquote element.

I have always said that everyone is in sales. Maybe you don’t hold the title of salesperson, but if the business you are in requires you to deal with people, you, my friend, are in sales.
Read more at: https://www.brainyquote.com/quotes/zig_ziglar_617802

Zig Ziglar

Or blockquote element styled as a pull quote

H3 Multi Column Layout Block

H3 headings get used a lot too.  Keep in mind it’s considered best practice to nest each section within the next major heading.  So,  H1 (page title) then H2 (major section) then H3 (minor section). You can of course nest all the way down through H4, H5 and H6 but it’s pretty rare to go that deep. 

H5 Image Gallery

Paragraphs and Aligned Images

Here are a few paragraphs in succession so you can see the spacing between paragraphs and how default WordPress image inserts look aligned right and left. 

Here is a medium sized image aligned right.  So you can see what size it is and you can see how it behaves differently on mobile. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quid minus probandum quam esse aliquem beatum nec satis beatum? Suo genere perveniant ad extremum; Quid me istud rogas? Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Quamquam tu hanc copiosiorem etiam soles dicere. Nemo igitur esse beatus potest. Duo Reges: constructio interrete. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Duo Reges: constructio interrete. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Ita est quoddam commune officium sapientis et insipientis, ex quo efficitur versari in iis, quae media dicamus.

Here is another medium image aligned left.  An vero, inquit, quisquam potest probare, quod perceptfum, quod. Ergo in utroque exercebantur, eaque disciplina effecit tantam illorum utroque in genere dicendi copiam. Indicant pueri, in quibus ut in speculis natura cernitur. Quod eo liquidius faciet, si perspexerit rerum inter eas verborumne sit controversia. Utram tandem linguam nescio? Verba tu fingas et ea dicas, quae non sentias? At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Primum in nostrane potestate est, quid meminerimus?

Sample Tables Striped and Lined

Easy to Edit Button Elements

Easy Video Embeds from YouTube and more

Easy Embeds from All Over

There are far too many embeds available for us to demonstrate them all.  Suffice to say most major services from Twitter to Instagram, Facebook, Slideshare and many more. 

Fieldsets and Form Elements

These are not Gutenberg blocks but are standard HTML form elements.  Most plugins will inherit these stypes.

Fieldsets and Form Elements

Styling for <pre> elements. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

/**
  * This is a test docblock
  *
  * @package  SomePackage
  * @since    1.0.1
  */

There are even more blocks you can add with plugins like Atomic Blocks and others.  It’s amazing!