This is a simple hero block.

This can show text and buttons.

This is button one This is button two

The new Grid System.

The new grid system.

Simply add the class “.fr-*-*-*-*” replacing the *s with your grid frame width.

Can be added directly to “grid” element or to any parent of a grid.

For example:

.fr-1-1 is equal to 2 columns with 50% width each

.fr-1-2 is equal to 2 columns. One with 33% and the other 66%

Any combination is valid upto 4 columns and the number 4.

.fr-4-3-2-4 is valid

.fr-5-7-1-2 is not valid

.fr-1-2-1-2-2 is not valid

Use the class “.mobile-fr-*-*-*-*” to control on devices with screen width under 550px

Use the class “.tablet-fr-*-*-*-*” to control frames on devices with screen width under 1024px

Block contents

background_type: Colour
background_colour: #546a7b
text_colour: #ffffff
padding: pbth
margin: no-m
anchor:

Welcome to the Toast Theme.

This is a bare-bones starter theme that we use for our websites.

There’s no design here, just some initial Gutenberg blocks to get us started.

Our theme is built from Gutenberg Blocks, and they are all listed on this page in alphabetical order.

Generally, blocks should not be overly modified for a site build.

If your site needs some custom content, create a new block rather than modifying an existing one.

If in doubt, ask Aaron, Dave or Charlotte.

This is some text before the block quote.

This is a block quote. This is some of the text for a blockquote.

This is the person who said it.

This is some text after the block quote.

Accordions.

These do what they say on the tin and can hold and display pretty-much any content.

Tab one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam augue ipsum, congue a elit at, sagittis aliquam massa. Proin efficitur leo enim, non sodales metus sollicitudin et.

Ut lobortis velit purus, vel ultricies nibh posuere eget. Nullam ornare sem id ligula maximus ullamcorper. Ut porta massa eget justo tempus fringilla. Ut eu commodo dui. Pellentesque ornare, nisi ac posuere pretium, odio ligula rhoncus enim, nec commodo lorem lorem at ligula. Sed quis sapien at tellus efficitur pulvinar. Praesent interdum faucibus iaculis. Nulla facilisi. Aenean eu elit eleifend, accumsan ex at, sodales eros. Etiam ut dui feugiat, aliquam ante at, convallis est. Pellentesque tincidunt rutrum enim, a suscipit neque semper vitae. Nulla sagittis felis risus, eget sodales magna ornare ultrices.

Tab two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam augue ipsum, congue a elit at, sagittis aliquam massa. Proin efficitur leo enim, non sodales metus sollicitudin et.

Columns, our main block.

This is some intro text.

Columns use Grid CSS to create flexible layouts for text and image content.

This column has the helper-class boxed p2 applied to it to add shadow and padding.

Button

The size of each column is controlled with Aarons fr- CSS classes.

This block is fr-1-2-1.

These classes also have tablet and mobile options: tablet-fr- and mobile-fr-.

Button

This block also has functions for background colour, background image, padding, margins and text colour, so it’s very flexible.

Button

Columns, our main block.

This is some intro text.

Columns use Grid CSS to create flexible layouts for text and image content.

This column has the helper-class boxed p2 applied to it to add shadow and padding.

The size of each column is controlled with Aarons fr- CSS classes.

This block is fr-1-2-1.

These classes also have tablet and mobile options: tablet-fr- and mobile-fr-.

This block also has functions for background colour, background image, padding, margins and text colour, so it’s very flexible.

This is a basic, non-designed call-to-action module.

This content is fully editable.

This is a button

This is another call to action, with the image placed on the right.

This content is fully editable.

This is a button

This is a hero block.

It generally lives right at the top of the page.

This is button one This is button two