Toast Blocks

These are blocks you can use on your site.

Accordion Title

Commodo mollit eveniet. Quasi qui blandit sagittis eaque dicta reprehenderit? Earum varius fugit delectus, aliqua, facilisis assumenda elementum. Aut debitis voluptas porttitor ullamcorper, euismod nonummy sodales primis facere pellentesque risus eum non? Inceptos odio ullamco dis tortor voluptas urna platea eget platea primis netus lobortis fames ipsum natus, asperiores ex, convallis sem, repellat praesentium nostrud lacinia commodi diam suscipit aperiam.

Accordions

This block adds accordion content to your site. Each accordion can also have it’s own columns and rows for more complex content requirements.

This is a simple block that acts as a TL:DR for the content. It has schema markup for SEO.

Dictum urna malesuada cum porro recusandae nostrud lacus orci per numquam molestie hymenaeos. Platea aenean voluptas? Orci dictum sagittis minus! Aspernatur adipisicing enim labore venenatis? Vitae gravida error tristique asperiores, elementum, exercitationem, vulputate non purus illo reprehenderit, laudantium magnis vehicula? Voluptatem sociis labore quibusdam, odit vitae, euismod reprehenderit soluta cubilia fugit consequatur, dolores consectetur! Convallis pharetra senectus facere, nunc repudiandae.

Article description

This is a basic block that acts as a TL:DR for blog posts. It uses schema markup to try and gain snippet ranking.

Home » Toast blocks

Breadcrumbs

This block adds Yoast breadcrumbs to your page or post.

Architecto curae rhoncus praesent nam.

Amet sem laoreet dicta corrupti quae accusamus delectus, beatae nostra repellendus ut arcu exercitation assumenda? Consequuntur sem dictumst in illum, quia. Hendrerit! Aptent praesent. Perferendis metus adipisicing. Ut tenetur eu, eleifend sint error donec, architecto! Illum deleniti, tellus per? Mus, aliquid impedit ullam luctus semper vulputate faucibus. Dapibus occaecati? Hac quod repudiandae minim deleniti potenti.

This is a button

Call To Action

This block adds a large, full-width call-to-action to your page. It’s designed to be customised as required for your site.

No posts selected.

Choose posts

This block creates an editable grid of selected post or page content. Using this block requires you to choose what content to display inside it.

Columns.

Column with Colum image. Odit dolores id, litora odit voluptatibus pharetra qui in nobis et enim, urna quae nonummy adipiscing similique tellus provident, suspendisse tempore tellus quaerat accumsan cupiditate nascetur repudiandae ad condimentum, ad lorem, deserunt deleniti neque posuere risus? Irure placerat dolor, aliquid blandit dicta! Maxime. Cursus incididunt, conubia quaerat posuere, sit cum turpis.

Button

Columns.

Column with icon. Curae magna nullam justo nec curabitur facilisi, est, incidunt! Odit dolores id, litora odit voluptatibus pharetra qui in nobis et enim, urna quae nonummy adipiscing similique tellus provident, suspendisse tempore..

Note that these columns have the class flex assigned to the column and flex-col to the content. This automatically applies margin-top: auto to the button-block, placing it at the bottom using flexbox rather than absolute positioning.

Button

Columns.

Column with background image. Curae magna nullam justo nec curabitur facilisi, est, incidunt! Odit dolores id, litora odit voluptatibus pharetra qui in nobis et enim, urna quae nonummy adipiscing similique tellus provident, suspendisse tempore tellus quaerat accumsan cupiditate nascetur repudiandae ad condimentum, ad lorem, deserunt deleniti neque posuere risus? Irure placerat dolor, aliquid blandit dicta! Maxime. Cursus incididunt, conubia quaerat posuere, sit cum turpis.

Button

Columns

This is the main block for building site content, it’s an extremely flexible block for displaying content in columns and uses the WYSIWYG editor.

Summary

This block allows you to quickly create a summary and list of contents on the page. The block works by grabbing the first H3 it finds in blocks on the page and making a contents item with a link to the anchor (which it adds) of the block.

All blocks now have an ‘exclude from contents’ toggle in the additional settings to allow blocks to be excluded (for example, a CTA block.

Contents & Summary

This block allows you to quickly create a summary and list of contents on the page.

Fermentum atque id do, ipsa asperiores minima error. Placerat incidunt mollis vitae impedit maiores alias lectus itaque, malesuada, saepe, veniam. Rhoncus praesentium tempus? Maiores? Laoreet autem sit doloremque. Voluptate ipsam class explicabo nihil dolores scelerisque, ac ipsam eius accusamus repellat nobis. Pharetra integer mi do, elit, aute tincidunt! Dui et. Numquam nec accumsan adipisicing voluptas, mauris! Mi diamlorem excepteur facere.

Quoter name
Quoter details

Customer quote

Features on the left, images on the right

This is the feature title

Atque habitant quam sagittis, fermentum maiores voluptatibus, arcu cras, taciti optio eveniet aliqua, aperiam necessitatibus dolores adipiscing tempus turpis consectetur.

This is the feature title

Atque habitant quam sagittis, fermentum maiores voluptatibus, arcu cras, taciti optio eveniet aliqua, aperiam necessitatibus dolores adipiscing tempus turpis consectetur.

This is the feature title

Atque habitant quam sagittis, fermentum maiores voluptatibus, arcu cras, taciti optio eveniet aliqua, aperiam necessitatibus dolores adipiscing tempus turpis consectetur.

This is the feature title

Atque habitant quam sagittis, fermentum maiores voluptatibus, arcu cras, taciti optio eveniet aliqua, aperiam necessitatibus dolores adipiscing tempus turpis consectetur.

This is the feature title

Atque habitant quam sagittis, fermentum maiores voluptatibus, arcu cras, taciti optio eveniet aliqua, aperiam necessitatibus dolores adipiscing tempus turpis consectetur.

Feature Scroller

This block has vertically scrollable text boxes on the left and then images that change to match the left box, on the right.

Full width image

Has caption

Gallery

This is the hero title.

This is the subtitle.

This is a button

Hero

Sollicitudin sociis facilis facere quibusdam.

Taciti lobortis, wisi quae aliqua deleniti iaculis, adipisci.

This is a button

Hero Background

This is the title

Elementum pharetra adipisci rerum morbi massa ultricies quisquam quas? Potenti dictum consectetur animi sint officiis vulputate volutpat dapibus facere, accusamus maxime incidunt tenetur suscipit animi amet perferendis expedita phasellus cras.

This is another title

This is the third title

Horizontal slider

This block is a horizontal accordion that accepts text, icons and background images.

Assumenda quae nunc anim dictumst tortor.

Malesuada nascetur porttitor eiusmod eligendi aute voluptate aute leo, dui consequat, deserunt nostrud placeat itaque, porro cupidatat eos platea ligula magnis nec volutpat. Nibh ratione tellus excepturi laoreet lorem numquam amet dicta quis. Tempus ornare ad repellat! Facilis, nam.

This is the button

Assumenda quae nunc anim dictumst tortor.

This is the button

Assumenda quae nunc anim dictumst tortor.

This is the button

Icon Columns

Before After

Image reveal block

This block allows you to add Youtube videos to a grid with a poster image and have each video open in a modal.

Lorem Ipsum

Vitae quae occaecati nostra hac fugiat mollitia! Non rutrum voluptate in ante? Ratione vero, illo cubilia incididunt fugiat, inceptos imperdiet? Aliqua minima tenetur nullam eget amet, anim, fringilla tempus, fugit placerat diamlorem.

Lorem Ipsum

Image switcher

This block shows text boxes (left or right) and changes the image (left or right) when you click the text box.

Logo slider

Adipisci commodi perferendis.

Adipisci commodi perferendis, fusce maiores atque perspiciatis luctus. Morbi natoque placeat velit dignissimos, pulvinar torquent, veniam? Penatibus, porta adipiscing voluptate tincidunt, rem natus in, tellus venenatis in.

Accordion title

Nested blocks

Design systems make subscriptions work.

Design output is only as good as feedback.

The importance of prioritisation in subscription design.

Why subscriptions favour long-term thinking.

Why design subscriptions suit growing teams.

Subscription design for marketing teams.

The hidden value of consistent designers.

How to get more value from design subscriptions.

Why subscription design rewards planning.

Post listings

This block allows you to select post type, category slug, etc.

How Subscription Design Changes How Teams Work

Why speed without clarity causes problems. A design subscription can help.

Post loop

Slider Title

Nunc magnam aliquid sodales quidem consequuntur voluptatum natoque unde conubia dolore nostrud! Commodi pede deleniti sapien pariatur, volutpat condimentum? Laboris.

Exercitationem debitis nibh lectus facilisi quam saepe, vulputate omnis unde faucibus, exercitation debitis augue, lacinia! Natus? Hac recusandae repudiandae pede.

Iste eius vehicula tempora quisque molestiae, nonummy necessitatibus rhoncus placerat parturient maiores ratione pellentesque fuga nesciunt, montes netus viverra vel.

Slider Title

Nunc magnam aliquid sodales quidem consequuntur voluptatum natoque unde conubia dolore nostrud! Commodi pede deleniti sapien pariatur, volutpat condimentum? Laboris.

Exercitationem debitis nibh lectus facilisi quam saepe, vulputate omnis unde faucibus, exercitation debitis augue, lacinia! Natus? Hac recusandae repudiandae pede.

Iste eius vehicula tempora quisque molestiae, nonummy necessitatibus rhoncus placerat parturient maiores ratione pellentesque fuga nesciunt, montes netus viverra vel.

Slider Title

Nunc magnam aliquid sodales quidem consequuntur voluptatum natoque unde conubia dolore nostrud! Commodi pede deleniti sapien pariatur, volutpat condimentum? Laboris.

Exercitationem debitis nibh lectus facilisi quam saepe, vulputate omnis unde faucibus, exercitation debitis augue, lacinia! Natus? Hac recusandae repudiandae pede.

Iste eius vehicula tempora quisque molestiae, nonummy necessitatibus rhoncus placerat parturient maiores ratione pellentesque fuga nesciunt, montes netus viverra vel.

Simple Slider

This is a simple slider that just uses columns.

Posts

Design work

Use cases

Design subscriptions for busy marketers

At minim sollicitudin ea perferendis.

us amet excepteur pellentesque occaecat consequatur, nec sagittis, necessitatibus nisl pellentesque, netus integer molestie voluptatibus perferendis, culpa assumenda proin perspiciatis eum ducimus lobortis rerum? Beatae fusce praesentium quidem. Cum? Culpa, illo, pretium aliquet, eum? Rerum aliquam consequat eget aliquam dictumst. Volutpat.

At accumsan minim sollicitudin ea perferendis.

At accumsan minim ea perferendis.

At accumsan sollicitudin ea perferendis.

Tab sets

Table header	Table header
Table cell	Table cell
Table cell	Table cell
Table cell	Table cell

Table

This is for more complex tables where links etc are required in the table.

This is a table header

This is a table link

This is a table cell

Table repeater

dsdfsdf

Repellat commodo excepteur blanditiis tellus lacinia! Harum!

Placerat magnam eleifend lorem harum enim consequatur qui metus, ex volutpat repudiandae? Assumenda, odio mus venenatis vel? Et blanditiis possimus provident optio laudantium, proin accumsan, ducimus cupidatat aut debitis rem, soluta ipsum? Rerum, at nibh! Commodo semper, morbi. Ultricies recusandae dicta, quam recusandae, sequi adipisicing, minima! Optio? Interdum vulputate! Soluta, venenatis atque, per.

John Doe
Managing Director

★ ★ ★ ★ ★

John Doe
Managing Director

★ ★ ★ ★ ★

John Doe
Managing Director

★ ★ ★ ★ ★

Testimonials Slider

A simple block with a WYSIWYG on the left to hold text or an image and then a Slick Slider on the right to show the testimonials.

Text hover image grid

This block shows text boxes (left or right) and changes the image (left or right) when you click the text box.

At accumsan minim,

At accumsan minim sollicitudin ea perferendis, mus amet excepteur pellentesque occaecat consequatur, nec sagittis, necessitatibus nisl pellentesque, netus integer molestie voluptatibus perferendis, culpa assumenda proin perspiciatis eum ducimus lobortis rerum?