![](https://bpf.vatu.dev/app/themes/bpf/patterns/assets/hero-cover-background.webp)
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
- Ordered List: Level 1
- Ordered List: Level 1
- Ordered List: Level 1
- Ordered List: Level 2
- Ordered List: Level 2
- Ordered List: Level 3
- Ordered List: Level 4
- Ordered List: Level 3
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 Heading | Column Heading | Column Heading | Column Heading | Column Heading |
---|---|---|---|---|
Row data | Left aligned data | Right aligned data | Center-aligned data (highlighted!) | Link to information |
Row data | Left aligned data | Right aligned data | Center-aligned data | Link to information |
Row data | Left aligned data | Right aligned data | Center-aligned data | Link to information |
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.
![](https://bpf.vatu.dev/app/uploads/2023/05/Background-1.webp)
You can also use the style variation Offset Border Right
or Offset Border Left
to achieve the border effect.
![](https://bpf.vatu.dev/app/uploads/2023/05/Background-1.webp)
Offset Border Left
![](https://bpf.vatu.dev/app/uploads/2023/05/Background-1.webp)
Offset Border Right
You can also choose between Yellow
or Blue
variations for the border.
![](https://bpf.vatu.dev/app/uploads/2023/05/Background-1.webp)
Offset Border Left
![](https://bpf.vatu.dev/app/uploads/2023/05/Background-1.webp)
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.
![](https://bpf.vatu.dev/app/uploads/2023/05/ACP.webp)
![](https://bpf.vatu.dev/app/uploads/2023/05/BPC.webp)
![](https://bpf.vatu.dev/app/uploads/2023/05/Birkbeck.webp)
![](https://bpf.vatu.dev/app/uploads/2023/05/UoE.webp)
![](https://bpf.vatu.dev/app/uploads/2023/05/UCL.webp)
This gallery below has 7 images of varying shapes used, but it aligns them nicely in a grid for you.
![](https://bpf.vatu.dev/app/uploads/2023/06/aarn-giri-IBhsB71R97k-unsplash.webp)
![](https://bpf.vatu.dev/app/uploads/2023/06/aaron-burden-TYvt5pmKng-unsplash.webp)
![](https://bpf.vatu.dev/app/uploads/2023/06/alfred-schrock-shoE2y51uX0-unsplash.webp)
![](https://bpf.vatu.dev/app/uploads/2023/06/amy-baugess-rVGr8zm6K7I-unsplash.webp)
![](https://bpf.vatu.dev/app/uploads/2023/06/anne-lambeck-5VC4thmwMms-unsplash.webp)
![](https://bpf.vatu.dev/app/uploads/2023/06/fleur-SE2zTdS1MNo-unsplash.webp)
![](https://bpf.vatu.dev/app/uploads/2023/06/karina-vorozheeva-Kol2ib6ehQE-unsplash.webp)
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.
![](https://bpf.vatu.dev/app/uploads/2023/05/Background-scaled.webp)
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.
![](https://bpf.vatu.dev/app/uploads/2023/05/Background-scaled.webp)
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.
![](https://bpf.vatu.dev/app/uploads/2023/05/Background-scaled.webp)
The home of psychotherapy
Europe’s only combined membership and training provider for psychoanalytic and Jungian psychotherapies.
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.
![](https://bpf.vatu.dev/app/uploads/2023/05/home-welcome.jpg)
Full Width
![](https://bpf.vatu.dev/app/uploads/2023/06/aaron-burden-TYvt5pmKng-unsplash.webp)
Oops, that page can’t be found.
The page you’re looking for may have been moved or deleted.
Video
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
Archives
Display a date archive of your posts.