Home / Utility / Design System

Design System

Typography

Heading

Introduce new sections and organise content to help visitors (and search engines) understand the structure of your content.

Sizes set via Block Editor

Heading 2XL (H1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading XL (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading Large (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading Medium (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading Small (H5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading XS (H6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Default sizes

Heading 2XL (H1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading XL (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading Large (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading Medium (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading Small (H5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Heading XS (H6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Paragraph

Start with the basic building block of all narrative.

Sizes set via Block Editor

Paragraph Large: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Paragraph Medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Paragraph Small: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Default sizes

Paragraph Medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien.

Columns

Organise your content into columns with varying widths.

One column

Two columns

Two columns

Three columns

Three columns

Three columns

Four columns

Four columns

Four columns

Four columns

2/3rds

1/3rd

1/3rd

2/3rds

Lists

Create a bulleted or numbered list.

  • List item one
  • List item two
    • Sub list item one
    • Sub list item two
  • List item three
  1. Ordered List: Level 1
  2. Ordered List: Level 1
  3. Ordered List: Level 1
    1. Ordered List: Level 2
    2. Ordered List: Level 2
      1. Ordered List: Level 3
        1. Ordered List: Level 4

Links

Add links to text in any paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit aliquet turpis donec at aliquet semper hac. At velit dolor ultrices sed condimentum convallis aliquet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit aliquet turpis donec at aliquet semper hac at velit dolor ultrices sed.

Quote

Give quoted text visual emphasis. “In quoting others, we cite ourselves” – Julio Cortázar

In quoting others, we cite ourselves

Julio Cortázar

Code

Display code snippets that respect your spacing and tabs.

<?php

/**
 * Theme.
 *
 * @package   Vatu\Wordpress\Theme\Example\Demo
 * @author    Vatu <hello@vatu.dev>
 * @link      https://vatu.dev/
 * @license   GNU General Public License v3.0
 * @copyright 2023 Vatu Ltd.
 */

declare(strict_types=1);

namespace Vatu\Wordpress\Theme\Example\Demo;

final class Theme
{
	/**
	 * Scope hooks and service identifiers.
	 */
	protected const HOOK_PREFIX    = 'vatu.theme.bpf.bpf';
	protected const SERVICE_PREFIX = 'vatu.theme.bpf.bpf';
}

Preformatted

Add text that respects your spacing and tabs, and also allows styling.

Example

Pullquote

Give special visual emphasis to a quote from your text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tempus odio, eget suscipit purus. Proin vulputate scelerisque viverra. Aliquam accumsan semper sapien. Duis tempor laoreet odio, ut vulputate tortor viverra vel. Vestibulum vitae risus in ligula malesuada porta eu a risus. Aliquam id nisl eget ipsum ultricies blandit non ac massa. Aliquam ullamcorper diam id leo pellentesque vestibulum. Nulla dolor risus, sodales nec efficitur ut, hendrerit quis risus. Morbi porta magna leo, non maximus ex finibus et. Cras a auctor quam, et auctor tortor. Integer convallis hendrerit ultrices. Mauris pellentesque pretium velit, at accumsan nunc porttitor quis. Cras auctor sapien quis mollis tempus. Sed eleifend tempus lacus laoreet rhoncus. Integer sed tempus diam. Morbi sed maximus erat.

Julio Cortázar

Table

Create structured content in rows and columns to display information.

Column HeadingColumn HeadingColumn HeadingColumn HeadingColumn Heading
Row dataLeft aligned dataRight aligned dataCenter-aligned data (highlighted!)Link to information
Row dataLeft aligned dataRight aligned dataCenter-aligned dataLink to information
Row dataLeft aligned dataRight aligned dataCenter-aligned dataLink to information
Caption explaining table content.

Verse

Insert poetry. Use special spacing formats. Or quote song lyrics.

Some things in life are bad
They can really make you mad
Other things just make you swear and curse
When you're chewing on life's gristle
Don't grumble, give a whistle
And this'll help things turn out for the best
And
Always look on the bright side of life
Always look on the light side of life
If life seems jolly rotten
There's something you've forgotten
And that's to laugh and smile and dance and sing
When you're feeling in the dumps
Don't be silly chumps
Just purse your lips and whistle, that's the thing
And
Always look on the bright side of life
(Come on)
Always look on the right side of life

Media

Image

Add an image to the content. This image is placed in the center.

You can also use the style variation Offset Border Right or Offset Border Left to achieve the border effect.

Offset Border Left

Offset Border Right

You can also choose between Yellow or Blue variations for the border.

Offset Border Left

Offset Border Right

Gallery

Add an entire gallery of photos to the page.

This gallery below has a class of gallery-logo-block added to achieve a consistent logo size.

This gallery below has 7 images of varying shapes used, but it aligns them nicely in a grid for you.

Audio

You can embed an audio file directly onto the page.

HTML Embed

You can embed (nearly) any HTML code onto a page. In the example below, we’re embedding a Soundcloud clip.

Cover

Default Width

This is the default width of blocks. It’s probably the same as the Wide Width below, and that’s OK.

The home of psychotherapy

Europe’s only combined membership and training provider for psychoanalytic and Jungian psychotherapies.

Wide Width

This is the Wide Width of blocks.

The home of psychotherapy

Europe’s only combined membership and training provider for psychoanalytic and Jungian psychotherapies.

Full Width

This is the Full Width of blocks. The outer block stretches to each edge of the screen, but the content in the middle should never be wider than the Wide Width setting.

The home of psychotherapy

Europe’s only combined membership and training provider for psychoanalytic and Jungian psychotherapies.

File

This is an example of an embedded file on the page.

Media & Text

Set media and words side by side for a richer layout.

Default Width

Oops, that page can’t be found.

The page you’re looking for may have been moved or deleted.

Full Width

Oops, that page can’t be found.

The page you’re looking for may have been moved or deleted.


Video

https://youtube.com/watch?v=lDu6SQjiZ-I

Design

Buttons

Buttons can be used across the site to link to other places.

Separator

Create a break between ideas or sections with a horizontal separator. Widths and colour can be set separately.

Full Width


Default Width


Wide Width



Widgets