Block Types

Last Updated: July 19, 2023

Where page types are set templates, wagtail streamfield blocks (hereafter known simply as ‘blocks’) are where you get to build and customize your page.

Glossary of available blocks:

1. Accordion
2. Airtable
3. Block with Aside
4. Blog Set
5. Card Grid
6. Datawrapper
7. Group Listing
8. Iframe
9. Image
10. Image Feature
11. Image Grid
12. Image Teaser
13. Image Text
14. Image Text Mini
15. Linkbutton
16. Listing
17. Paragraph
18. Profiles
19. Profile By Id
20. Profile Listing
21. Profile Directory
22. Pulse Listing
23. Quote
24. Recent Blog Entries
25. Spacer
26. Text Only Teaser
27. Typeform
28. Video

Special Notes:

Article Page Types have a selection of blocks only available to them (see below). If these look like they might interest you please see Publications.

• 2x Images
• Callout
• Table and Advanced Table
• Wide Image

Blog Page Types have the following two blocks unique to them:

• Audio
• Looping Video

Accordion

Airtable

The Airtable block allows you to embed a table (from Airtable) onto your page.

Live projects using this component:

• Data Futures Lab

Block with Aside

Highlight information or a call out on the right side of the page. This works best for wide page layouts.

Audio

*Note: The Audio stream field block is only available on Blog Page Types

The Audio block allows you to embed a sound clip onto your page.

Live projects using this component:

• Introducing Myself, Kathleen Siminyu

Blog Set

The Blog set block allows you to pick and choose different blog posts to feature on your page via styled cards.

Live projects using this component:

• Election Integrity

Card Grid

The Card grid block allows you to customize multiple cards with an image, text and link of your choice.

Live projects using this component:

• Fellowships & Awards Evaluation

Datawrapper

Use the Datawrapper block to add an interactive chart.

Learn how to use Datawrapper.

Group Listing

Add multiple cards to give users an overview of information. Card have an optional link to internal or external pages.

Iframe

Use the iframe block with caution. Sites will appear as 404 error until it is white listed and embedded iframes may not be the best solution for your need. Please reach out to the engineering team.

Live projects using this component:

• Interactive timeline
• Interactive visualisation

Image

Use the Image block to insert a JPEG, PNG or WEBP onto your page. Maximum file size is 10MB and you can select your choice of image width: normal, wide or full width.

Live projects using this component:

• 100 Stories of internet health, shared by you

Image Feature

Help highlight information with a large image and minimal text.

Image Grid

The Image grid block allows images and captions to be uploaded in a row, up to four in a row. On mobile, the arrangement will change to up to two in a row.

Live projects using this component:

• Teaching Responsible Computing Playbook — Authors and Contributors

Image Teaser

Add multiple cards with optional dividing lines and optional button.

Image Text

The Image text block features an image on the left and a paragraph on the right, you can also choose to have top and bottom dividers. The image is also linkable.

Live projects using this component:

• 5 key decisions for every smart device

Image Text Mini

The Image text mini block is similar to the Image text block but features a smaller image. It is commonly used for Call to Actions but can be remixed for whenever you want to use a smaller image (e.g. icons).

Live projects using this component:

• Explore the MozFest 2021 Schedule
• What we fund — Fellowships
• CBS All access
• Brand — Color

Linkbutton

The Linkbutton block allows you to create your own button by customizing the text, URL and style (choose from primary or secondary).

Live projects using this component:

• 5 Community Projects at MozFest You Don’t Want to Miss

Listing

The Listing block allows you to create cards (need a minimum of two) and can link internally or externally.

Paragraph

The Paragraph block allows you to enter rich text options. Examples:

Bold

Italicized

Large Body Text

Heading 2

Heading 3

Heading 4

Heading 5

Numbered List

1. List Item 1
2. List Item 2
3. List Item 3

Bulleted List

• Bullet One
• Bullet Two
• Bullet Three

Divider:

Link

Live projects using this component:

• This page and this paragraph!

Profiles

Profile image and bios are pulled from Profile Snippets. Profile Snippets use the same photo and info here as they do for blog and report authors.

Profile by id

The Profile by id block allows you to show one or more specific Pulse profiles by their ID number.

• To feature one profile enter the pulse ID number where the ‘##’ sign is: (mozillapulse.org/profile/[##]).
• For multiple profiles, specify a comma separated list (e.g. 85,105,332).

Live projects using this component:

• Mozilla Insights — Meet the team

Profile Listing

The Profile listing block is used to grab a group of profiles. For example, Tech Policy Fellows.

• Max results - set the number to appear on your page.
• Profile type - type is set in the Pulse admin. These include "fellow", "staff", etc. Leave this empty to pull any type.
• Program type - programs are set in the Pulse admin. These include "tech policy" etc. Leave this empty to pull any type.
• Year - use this to limit your results to profile marked in Pulse Admin for a particular year. Used for fellow cohorts.

Profile Directory

Like the Profile listing block, the Profile Directory block allows you to grab a group of Pulse profiles. This block, however, lets you filter the profiles by year.

• Max results - set the number to appear on your page.
• Profile type - type is set in the Pulse admin. These include "fellow", "staff", etc. Leave this empty to pull any type.
• Program type - programs are set in the Pulse admin. These include "tech policy" etc. Leave this empty to pull any type.
• Year - use this to limit your results to profiles marked in Pulse Admin for a particular year. Used for fellow cohorts.
• Filter values - use this to filter Pulse profiles by year

Live projects using this component:

• What we fund — Directory

Pulse Listing

The Pulse listing block allows you to pull projects from Pulse onto your page. It allows you to search by keywords and then filter by issue etc. The admin has these options:

• Search - Use any word or phrase. This will search titles, descriptions, and tags. Test your search on Pulse first.
• Max results - set the number to appear on your page. This is limited so we don't overwhelm visitors. If you want to show more, link them to a search URL on Pulse. Pulse allows them to favorite things, view creators, and discover more.
• Display featured - check this to limit your results to things marked as featured by our moderators on Pulse. Leave unchecked to show all results.
• Sort - show the latest stuff by default
• Issues - use this to limit your results to items with an issue
• Help - use this to limit your results to projects that need a particular kind of help from collaborators

Live projects using this component:

• Artists Open Web — Art + Data 2018

Quote

The Quote block allows you to add a stylized excerpt onto your page. You can enter the text and attribution.

Live projects using this component:

• A Case For Knowledge-Sharing Between Technologists and Digital Rights Litigators

Recent Blog Entries

The Recent blog entries block allows you to add blog post cards to your page via filters, either by tag or category. This is helpful if you want your cards to stay up-to-date without having to manually change them.

Live projects using this component:

• Insights news
• What we Fund news

Spacer

Is it feeling squishy on your page? Use the spacer block to create some breathing room between other blocks.

Live projects using this component:

• Ethics in the tech industry matter

Table

*Note: The Table stream field block is only available on Article Page Types

Use the Table block to add a table to your page.

Live projects using this component:

• Data for Empowerment — What Helps? | Understanding Needs and the Ecosystem for Support

Text Only Teaser

Text only feature cards. Minimum of three cards is required.

Typeform

Use the Typeform block to add a button that links to your Typeform. Note that a page can only contain a single Typeform embed.

Learn how to use Typeform.

Live projects using this component:

• Common Voice blog post

Video

Use the video block to embed a video (linked from elsewhere, for example, YouTube) on your page.

Live projects using this component:

• Big Tech and Germany’s Election
• Dialogues & Debates: Highlights from the MozFest Speaker Series