Skip to content

The Pottery

Website Style Kit

This page outlines the current colours, styles and design standards for this website

Brand Colours

Primary
Light
Dark
Body text

Text 2XL

Text XL

Text LG

Text MD (Normal)

Text sm

Text xs

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Topography partials

h1 partial

h2 partial

h3 partial

This is a paragraph using the paragraph partial. Nam liber tempor cum soluta...

This is a caption

Text block

Display style=Default (Left)

Laborum duis in quis. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Text block

Display style=Centre, Align text=left, Colour scheme light

Laborum duis in quis. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Text block

Display style=Centre (with left aligned text + centre headings)

Laborum duis in quis. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Text block

Display style = Centre, Align text = Centre all text, , Colour scheme primary

Laborum duis in quis. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Text block

Display style=Offset

Laborum duis in quis. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Text block heading

Colour scheme light (background colour)

Lede text - eiusmod labore do ad minim aute deserunt irure in id. Incididunt amet ipsum nisi sit consequat et minim anim proident adipisicing irure proident aliquip est.

Brand text - Enim nulla do officia minim et eiusmod veniam velit officia deserunt culpa consequat qui proident.

Minim exercitation esse velit. Nisi nulla consectetur elit dolore labore labore laboris adipisicing labore ut occaecat ex enim. Nulla amet est ipsum elit nisi deserunt. Nisi ad nulla minim consequat esse in aliquip et eu sunt mollit eu nulla reprehenderit sit. Duis officia laborum ad mollit sint pariatur ipsum enim eiusmod ipsum aliqua in ipsum aute ad.

This is a block quote using the “ in the editing bar.

“This is a pull quote using the Pull Quote block. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.”
- Brendyn

Buttons

Primary Primary outline Light Light Outline Inline

Media and text (Column layout: Even,)

Image right, Content vertical alignment=centre

This is the content. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.

Image caption

Media and text (Column layout: Even)

Image left, content vertical alignment=top

This is the content. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.

Image caption

Media and text (no gap)

Image right, Content vertical alignment=centre

This is the content. There is no gap between the blocks as they butt up against each other. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.

Image Caption

Media and text (no gap)

Image left, Content vertical alignment=centre

This is the content. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.

Image Caption

Media and text (Edge to centre, a lot of text)

Image left, Content vertical alignment=centre

This is the content. Id nulla quis pariatur ea Lorem velit non. Est duis quis voluptate aliquip culpa ea non ipsum et aliquip. Occaecat minim aliquip sit id irure eu ullamco reprehenderit ut ea dolor. Eiusmod ex reprehenderit quis qui enim dolor exercitation. Nostrud enim non amet fugiat reprehenderit elit ut anim velit. Excepteur consectetur laborum laboris minim. Laborum ad irure adipisicing incididunt commodo eiusmod.

Est veniam velit irure voluptate qui non commodo laboris. Consectetur magna nulla eu. Magna eiusmod et cillum laboris nisi magna Lorem labore cillum dolore officia sint. Velit dolor dolore duis ex velit mollit fugiat est quis tempor ex. Veniam quis in cillum incididunt adipisicing dolore laboris excepteur consectetur enim dolor elit ut. Pariatur labore cillum aute culpa ullamco velit ut.

Est veniam velit irure voluptate qui non commodo laboris. Consectetur magna nulla eu. Magna eiusmod et cillum laboris nisi magna Lorem labore cillum dolore officia sint. Velit dolor dolore duis ex velit mollit fugiat est quis tempor ex. Veniam quis in cillum incididunt adipisicing dolore laboris excepteur consectetur enim dolor elit ut. Pariatur labore cillum aute culpa ullamco velit ut.

Image caption

Media and text (Edge to centre, a bit of text)

Image right, Content vertical alignment=centre

This is the content. Id nulla quis pariatur ea Lorem velit non. Est duis quis voluptate aliquip culpa ea non ipsum et aliquip. Occaecat minim aliquip sit id irure eu ullamco reprehenderit ut ea dolor. Eiusmod ex reprehenderit quis qui enim dolor exercitation. Nostrud enim non amet fugiat reprehenderit elit ut anim velit. Excepteur consectetur laborum laboris minim. Laborum ad irure adipisicing incididunt commodo eiusmod.

Columns Block

Sub heading - this block displays the available content sets

Eiusmod labore do ad minim aute deserunt irure in id. Incididunt amet ipsum nisi sit consequat et minim anim proident adipisicing irure proident aliquip est. Enim nulla do officia minim et eiusmod veniam velit officia deserunt culpa consequat qui proident. Lede text - eiusmod labore do ad minim aute deserunt irure in id. Incididunt amet ipsum nisi sit consequat et minim anim proident adipisicing irure proident aliquip est.

Brand text - Enim nulla do officia minim et eiusmod veniam velit officia deserunt culpa consequat qui proident.

Minim exercitation esse velit. Nisi nulla consectetur elit dolore labore labore laboris adipisicing labore ut occaecat ex enim. Nulla amet est ipsum elit nisi deserunt. Nisi ad nulla minim consequat esse in aliquip et eu sunt mollit eu nulla reprehenderit sit. Duis officia laborum ad mollit sint pariatur ipsum enim eiusmod ipsum aliqua in ipsum aute ad.

Anim id nostrud et.

“Pull quote - Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.”
- Brendyn

Buttons

Primary Primary outline Light Light Outline Inline

Cards Block (Text)

Cards Block (Image)

Two images block, Offset

1st image crop=Portrait, 2nd image crop=landscape

This is text content. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

First image caption
Second image caption

Two images block, Inline

Crop = landscape, Text = Left

This is text content

First image caption
Second image caption

Two images block, Standard

Crop = landscape, Text = Left

This is text content

First image caption
Second image caption

Gallery

Images are Crop thumbnails = square, expands into lightbox on click.

Call to action

Call to action text - tell your visitors what you want them to do next.

CTA button

Form desctiption

Dark Colour Scheme

Incididunt sit enim voluptate eu qui elit velit nostrud aliqua commodo. Non mollit tempor deserunt officia.

Primary Colour Scheme

Incididunt sit enim voluptate eu qui elit velit nostrud aliqua commodo. Non mollit tempor deserunt officia.