Pattern: Quote with Audio

About

This pattern allows you to highlight a quote in your content whilst at the same time enabling the user to hear that quote being spoken aloud.

Adding a Quote with Audio pattern

1. Click the + icon to add a new block from the top toolbar in the page/post editor.
2. Click on the Patterns tab.
3. Either choose which category of patterns you want to select from or click Explore to open a modal that allows you to have a larger view of each pattern.
4. In the explore view, you can type ‘audio’ into the search bar to find the Quote with Audio patterns.
5. There are two Quote with Audio options, one with the audio above the quote, and one with the audio below.
6. Click on the pattern you wish to insert or drag and drop the pattern into your content. If you click on the pattern, it will be inserted at the location of your cursor.

Quote with Audio settings

The quote with audio pattern is made up of a Group block containing an audio block and a quote block. See the documentation on each of these blocks to find out more about the available settings.

Quote with Audio pattern demonstration

Quote with audio above it

Quote with audio below it