Brand Colours
Colour 1:
#7ACFDB
Colour 2:
#7C8A96
Black:
#222222
Grey 4:
#e1e1e1
Grey 2:
#F5F5F5
White:
#ffffff
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
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Fancy Heading
Heading with Underline
Paragraph size extra large Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph size large Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph size medium Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph size default Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph size small Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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
- List item one -start at 8
- List item one
- List item one -reversed attribute
- List item two
- List item three
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
Unordered List
- List item one
- List item one
- List item one
- List item two
- List item two
- List item three
- List item one
- List item two
- List item three
Arrow List
- List item text lorem ipsum dolar
- List item text lorem ipsum dolar
- List item text lorem ipsum dolar
Icon List
- List item text lorem ipsum dolar
- List item text lorem ipsum dolar
- List item text lorem ipsum dolar
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.
Employee | Salary | Position |
Jane Doe | $100k | CEO |
John Doe | $100k | CTO |
Jane Bloggs | $100k | Engineering |
Fred Bloggs | $100k | Marketing |
Latest Posts, List View
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
- 10 Outstanding Stock Photo Sites in 2024 (Paid + Free)
- Why is Mobile Responsive Web Design so Critical to Website Success?
- How to Optimise Your Website to Generate More Inbound Call Leads (in 4 Easy Steps)
- 3 BIG Reasons Your Website is Losing Sales (Every Day!)
- How to Create Your Freelance Website Funnel and Get Clients on Demand (in 7 Simple Steps)
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.
- 10 Outstanding Stock Photo Sites in 2024 (Paid + Free)
- Why is Mobile Responsive Web Design so Critical to Website Success?
- How to Optimise Your Website to Generate More Inbound Call Leads (in 4 Easy Steps)
- 3 BIG Reasons Your Website is Losing Sales (Every Day!)
- How to Create Your Freelance Website Funnel and Get Clients on Demand (in 7 Simple Steps)
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.
Blockquote text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Blockquote Byline, Title – LINK
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 Blockquotes
Large
Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
JOHN DOE, CEO – LINK
Alternate
Blockquote text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
John Doe, CEO – LINK
Alternate Large
The alternate block quote style can be tarageted using the .wp-block-quote.is-style-alternate-large. CSS selector. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Blockquote text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
JOHN DOE, CEO – LINK
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:
Curabitur blandit tempus porttitor. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.
Buttons
Gutenberg Buttons
WP Buttons
HTML Buttons
Buttons wrapped inside .buttons class
Button links
Button Grey 4 Small Button Grey 2 Small
Button link inside paragraph tag
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
- Branding (5)
- Digital Marketing (4)
- UX Design (5)
- Web Design (18)
- WordPress (6)
Archives
- November 2021 (1)
- June 2019 (2)
- February 2019 (1)
- June 2017 (1)
- October 2016 (1)
- May 2016 (1)
- March 2016 (1)
- December 2015 (1)
- August 2015 (1)
- July 2015 (1)
- May 2015 (1)
- April 2015 (1)
- March 2015 (1)
- February 2015 (2)
- December 2014 (1)
- November 2014 (1)
- October 2014 (1)
- September 2014 (1)
- August 2014 (1)
- July 2014 (4)
Columns
100
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
50/50
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.
33/70
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
70/30
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
33/33/33
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.
25/50/25
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
25/25/25/25
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.
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.
Full width
And finally, here is an example of the core pull quote block, set to display with the full-aligned attribute, if the theme allows it. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
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.
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.
Wide aligned
Full Width
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.
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.
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.
Wide aligned
Full Width
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.
Wide aligned
Wide Cover Image Block
Full Width
Full Width Cover Image
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.
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.
Wide aligned 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. It is set to display with the new Wide alignment (if the theme supports it).
Three Column
Below we have a Gallery Block inserted with three columns and three images. It is also set to display with the new Wide alignment.
Four Column
Below we have a Gallery Block inserted with four columns and four images. It is also set to display with the new Wide alignment.
Five Column
Below we have a Gallery Block inserted with five columns and five images. It is also set to display with the new Wide alignment.
Four Column, Five Images
Let us switch things up a bit. Now we have a Gallery Block inserted with four columns and five images, also displayed with the new Wide alignment option.
Three Column, Five Images
Now we have a Gallery Block inserted with three columns and five images displayed with the new Wide alignment option.
Two Column, Five Images
Below you will find a Gallery Block inserted with two columns and five images also displayed with the new Wide alignment option.
Three Column, Four Images
Below you will find a Gallery Block inserted with three columns and four images, also displayed with the new Wide alignment option.
Full Width Gallery Block
Below you will find a Gallery Block inserted with three columns and four images, also displayed with the new Wide alignment option.
Media & Text
Large text
This is part of the InnerBlocks text for the Media & Text block.
Definition Lists
- Definition List Title
- Definition list division.
- Startup
- A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
- #dowork
- Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
- Do It Live
- I’ll let Bill O’Reilly will explain this one.
Custom Gutenberg Blocks
Use simple tactics in this free website checklist to capture and convert more leads into customers in 7-days or less
Yes, Send My FREE ChecklistUse simple tactics in this free website checklist to fix your leaky website or avoid expensive mistakes before you start
Yes, Send My FREE ChecklistWant a more profitable website?
Use simple tactics in this free website guide to create a profitable new website (or increase your current sites performance)
Yes, Send My FREE GuideTip! You can copy and paste properties between Auto Layout frames.
Mac: ⌥ Option ⌘ Command C and ⌥ Option ⌘ Command V
Windows: Ctrl + Alt + C and Ctrl + Alt + V
Note! You can copy and paste properties between Auto Layout frames.
Mac: ⌥ Option ⌘ Command C and ⌥ Option ⌘ Command V
Windows: Ctrl + Alt + C and Ctrl + Alt + V
Notice! You can copy and paste properties between Auto Layout frames.
Mac: ⌥ Option ⌘ Command C and ⌥ Option ⌘ Command V
Windows: Ctrl + Alt + C and Ctrl + Alt + V
Important! You can copy and paste properties between Auto Layout frames.
Mac: ⌥ Option ⌘ Command C and ⌥ Option ⌘ Command V
Windows: Ctrl + Alt + C and Ctrl + Alt + V
Caution! You can copy and paste properties between Auto Layout frames.
Mac: ⌥ Option ⌘ Command C and ⌥ Option ⌘ Command V
Windows: Ctrl + Alt + C and Ctrl + Alt + V
Warning! You can copy and paste properties between Auto Layout frames.
Mac: ⌥ Option ⌘ Command C and ⌥ Option ⌘ Command V
Windows: Ctrl + Alt + C and Ctrl + Alt + V
Danger! You can copy and paste properties between Auto Layout frames.
Mac: ⌥ Option ⌘ Command C and ⌥ Option ⌘ Command V
Windows: Ctrl + Alt + C and Ctrl + Alt + V
Social Media Share Buttons
?
Social Media Share Links
?
Brand Icon
?
Email Contact Form
Email Subscribe CTA
?
Brand CTA
?
HTML Tags
These supported tags come from the WordPress.com code FAQ.
Address Tag
1 Infinite LoopCupertino, CA 95014
United States
Anchor Tag (aka. Link)
This is an example of a link.
Abbreviation Tag
The abbreviation srsly stands for “seriously”.
Acronym Tag (deprecated in HTML5)
The acronym ftw stands for “for the win”.
Cite Tag
“Code is poetry.” —Automattic
Code Tag
This tag styles blocks of code.
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;
}
You will learn later on in these tests that word-wrap: break-word;
will be your best friend.
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
}
Delete Tag
This tag will let you strike out text, but this tag is recommended supported in HTML5 (use the <s>
instead).
Emphasize Tag
The emphasize tag should italicize text.
Horizontal Rule Tag
This sentence is following a <hr />
tag.
Insert Tag
This tag should denote inserted text.
Keyboard Tag
This scarcely known tag emulates keyboard text, which is usually styled like the <code>
tag.
Quote Tag for short, inline quotes
Developers, developers, developers…
–Steve Ballmer
Strike Tag (deprecated in HTML5) and S Tag
This tag shows strike-through text.
Small Tag
This tag shows smaller text.
Strong Tag
This tag shows bold text.
Subscript Tag
Getting our science styling on with H2O, which should push the “2” down.
Superscript Tag
Still sticking with science and Albert Einstein’s E = MC2, which should lift the 2 up.
Teletype Tag (obsolete in HTML5)
This rarely used tag emulates teletype text, which is usually styled like the <code>
tag.
Underline Tag deprecated in HTML 4, re-introduced in HTML5 with other semantics
This tag shows underlined text.