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:
- Accordion
- Airtable
- Block with Aside
- Blog Set
- Card Grid
- Datawrapper
- Group Listing
- Iframe
- Image
- Image Feature
- Image Grid
- Image Teaser
- Image Text
- Image Text Mini
- Linkbutton
- Listing
- Paragraph
- Profiles
- Profile By Id
- Profile Listing
- Profile Directory
- Pulse Listing
- Quote
- Recent Blog Entries
- Spacer
- Text Only Teaser
- 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 heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam odio, posuere nec arcu vel, imperdiet bibendum enim. Etiam interdum diam vitae magna interdum, vitae semper risus auctor. Integer ut viverra nibh. Phasellus a tincidunt mauris, quis varius velit. Fusce a sagittis augue. Quisque arcu mauris, dignissim ut dapibus vitae, lacinia ut augue. Nam non dui at ante ultrices scelerisque. Aenean nibh enim, auctor vel feugiat non, iaculis vel felis. Cras sed venenatis arcu. Nunc dictum dolor vitae quam vulputate porta. Vivamus porttitor, leo ut ultricies dictum, nunc dolor bibendum quam, porttitor suscipit tortor mauris eu ligula. Cras mattis arcu felis, sed gravida leo tristique nec. Nullam tempor nisl a laoreet porttitor. Nulla nisi massa, egestas id semper vel, dignissim nec ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Accordion heading with image in expanded content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam odio, posuere nec arcu vel, imperdiet bibendum enim. Etiam interdum diam vitae magna interdum, vitae semper risus auctor. Integer ut viverra nibh. Phasellus a tincidunt mauris, quis varius velit. Fusce a sagittis augue. Quisque arcu mauris, dignissim ut dapibus vitae, lacinia ut augue. Nam non dui at ante ultrices scelerisque. Aenean nibh enim, auctor vel feugiat non, iaculis vel felis. Cras sed venenatis arcu. Nunc dictum dolor vitae quam vulputate porta. Vivamus porttitor, leo ut ultricies dictum, nunc dolor bibendum quam, porttitor suscipit tortor mauris eu ligula. Cras mattis arcu felis, sed gravida leo tristique nec. Nullam tempor nisl a laoreet porttitor. Nulla nisi massa, egestas id semper vel, dignissim nec ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
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:
Blog Set Example
-
Advocacy Sept. 29, 2021Can My Boss Read My Slack DMs—And Other Workplace Wonderings
Let’s dig into those surveillance settings
Xavier Harding
Card Image 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus lacus nec placerat.
Card Image 3
Convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.
Example title
-
Meta dataCard title one
Convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.
-
Card title two
Convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.
-
Card title two
Convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.
Example title
Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.
Example Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Example link CTA.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Example CTA.
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
- List Item 1
- List Item 2
- List Item 3
Bulleted List
- Bullet One
- Bullet Two
- Bullet Three
Divider:
Live projects using this component:
- This page and this paragraph!
The Insights team researches and develops recommendations on Trustworthy AI topics with a focus on Transparency, Data Governance and Equity fields. We highlight what can be done and who is working towards a healthier internet. Mozilla Insights is le…
Editor on the Mozilla Insights team. Editor of the annual Internet Health Report and other publications.
Brandi is a Senior Fellow at Mozilla where she comes up with new ways to hold the internet’s biggest platforms accountable for algorithms, online advertising, privacy, and other issues. She is the creator of the YouTubeRegrets campaign.
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:
Leading Mozilla's developer-focused strategy around trustworthy AI and MozFest.
Mozilla Fellow. Co-founder of ThingsCon, a non-profit advocating the creation of a responsible IoT.
Media Artist + Media Design Lecturer at the University of the Arts London + Digital Art Producer. Curator of Mozilla Artists Open Web.
I'm a Researcher on Mozilla's Advocacy 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.
Mozilla Fellow working to develop collaborative solutions and effective policy responses to the threat of online radicalization
Mozilla Fellow. Conducting research on net neutrality and data protection regime in Nigeria. Senior Associate at Streamsowers & Kóhn.
Clara Tsao is a Mozilla Technology Policy Fellow researching the effectiveness of online tools to counter online disinformation.
Ayden Férdeline is a Mozilla Tech Policy Fellow researching the ongoing development and harmonization of global privacy standards.
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:
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:
Of all the groups we work with regularly, very few have had the impact that our collaborations with Mozilla have had over the years…it’s absolutely a match made in heaven.
Jenny Toomey, Ford Foundation
Example Title
-
Mozilla Explains May 25, 2021Mozilla Explains: Why Did I Watch That?
A primer on YouTube's recommendation algorithm.
Xavier Harding
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:
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: