Gutenberg blocks
Below is a list of Gutenberg blocks using the University DPL:
If you’re unfamiliar with the Gutenberg editor you should check out WordPress’ official documentation.
Accordions
The accordion pattern presents an expandable and collapsible section of content. Accordions shorten pages and reduce scrolling, but they require users to click on topic headings to find information. Therefore, accordions should be used sparingly. For more information see the Nielsen Norman Group report on accordion usability.
This is an accordion, woohoo!
This is another accordion, woohoo!
For the full list of rules and details on the accordion pattern, see: DPL accordion.
Blockquote
The blockquote pattern is used to display a quote from a person or written excerpt.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula.
Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar, rhoncus felis vel, condimentum elit. Integer tempus efficitur dolor. Donec vitae sem scelerisque, sollicitudin nisi sed, faucibus nisl. Cras feugiat ligula a consectetur lacinia.Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar.”
– Citation title
For the full list of rules and details on the blockquote pattern, see: DPL blockquote.
Alerts
The alert pattern is used to convey important information to users with four colour variations.
Alert (information)
This is an information alert!
Alert (success)
This is a success alert!
Alert (warning)
This is a warning alert!
Alert (danger)
This is a danger alert!
For the full list of rules and details on the alert pattern, see: DPL alerts.
Callouts
This should be used to promote inline content that is of greater importance than the surrounding content. This can be used as a visually more prominent option over using bold text.
Callout (information)
This is an information callout!
Callout (success)
This is a success callout!
Callout (warning)
This is an warning callout!
Callout (danger)
This is a danger callout!
For the full list of rules and details on the callout pattern, see: DPL callouts.
Navboxes
The navbox pattern is used to present featured links with an optional background image and paragraph. and can be used in a grid with various layouts.
This is a navbox, and Ethel!
For the full list of rules and details on the navbox grid pattern, see: DPL navbox grids.
Contact cards
The contact card pattern is used to display contact information about an individual which may link to additional information.
Peter Woodbridge
Department / unit
Job title
- Phone
- 0123456789
- [email protected]
- Biography
This is a bigger biography, woohoo!
Steve Evans
An example contact card with no details
Steve Evans
Tommy Oldfield
Department / unit
Job title
This contact card uses an external link instead of a Lightbox biography
For the full list of rules and details on the contact card pattern, see: DPL contact cards.
Panels
The panel pattern comprises a heading or image, both with a description. Panels may be used in asides for additional information or combined together to form a grid.
Panel 1 (1/3)
Lorem ipsum something something
Lorem ipsum something something something
Panel 3 (1/3)
Lorem ipsum something
Panel 4 (1/2)
Lorem ipsum
Another Lorem ipsum
For the full list of rules and details on the panel grid pattern, see: DPL panel grid.
Details
Details
Details