Style Guide

Common Blocks ( This is a cover block)

Paragraph Block
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Block

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Lists

  • List Item 1
  • List Item 2
  • List Item 3
  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3

Image Block (Left Aligned)

Image Caption

Image Block (Centered)

Image Block (Right Aligned)

Gallery Block

Quote Block

Tomorrow Belongs to those who can hear it coming.

– David Bowie

Formatting Blocks

Code Block: Used to add code (for displaying).

.wp-block-image {
  .alignleft {
    float: none;
    margin: 0;
    text-align: left;
    margin-right: auto;

  }

  .alignright {
    float: none;
    margin: 0;
    margin-left: auto;
    text-align: right;
  }

  .aligncenter {
    float: none;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

Classic Block: This is a block without any difference on the front-end, however pulls up the old content editor (TinyMCE) as a block.

Custom HTML Block

Also no difference on the front-end, but used to enter custom HTML

Pre-formatted block. Use this block if you would like to make sure the text contains absolutely no formatting. Useful for legal documents, quotes, etc.

Pullquote Block

Similar to the Quote Block above, but it is used as a section, not within content.

– Ken

Table Block ( supports copy paste, below was copy/pasted from the live site

KaratHallmarkGold %Analysis
9K.37537.5%Lowest karat of gold
10K.41741.7%Low karat jewelry
14K.58558.3%Most common in jewelry
16K.66666.6%Primary used in dental gold
18K.75075.0%Very popular and more yellow in color
20K.83383.3%Popular karat used on jewelry overseas
21K.87587.5%Popular karat used on jewelry overseas
22K.91691.6%Popular karat used on jewelry overseas
24K.99999.9%Highest purity of gold, sold in bullion and coins
Also supports a caption

Layout Elements

Page Break Block: Not used here, can be used to add pagination to a page/post. Useful mainly for article/tutorial sites.

Spacer Block: Used to create space. 100px height spacer used below.

Buttons Block: Creates a group of buttons. A Button block is always nested in a Buttons block

Columns Block: Used to Create Column Layouts. Only supports equal columns for now.

50% Column Block

50% Column Block

33% Column Block

33% Column Block

33% Column Block

Groups Block: This should be heavily used. Useful when you want to have a Group/Section. Most common usage is for Sections with full-width Background/Image. Should Also be used if you want to add background color to something, as some blocks (such as columns) do not have color settings.

This is a Group Block (blue background, full width)

With a Columns Block. Each Column has another Group

With a White background so that we can have colored Columns.

Media & Text Block: Useful for hero sections where you want half image/ half text or content. You can also re-create with Columns, but for clean integration this should be used instead.

Media & Text Block Text. Text Color is set to white.

More Block: Not used. you can set a More block to indicate the page’s excerpt (anything below the More Block will be truncated in post listing pages, etc.)

Separator Block: separates and spaces out sections.


Scroll to Top