
On this page:
- Accordion
- Cards
- Promotion cards
- Navigation cards
- Call to action cards
- Key dates
- Card sorting options
- Card carousel
- Latest events
- Image gallery
- Complex image
- Timelines
- News
- News listing
- Data
- Data table
- Data driven component
- Forms
- OpenForms
- Drupal form
- Basic text
- Here's an internal link.
- Here's an external link.
- Headings styles - this is heading 2
- This is a heading 3
- Quote styles
- Block quote
- Indented quote
- Callout styles
- Single paragraph callout
- WYSIWYG callout
- List formatting and nesting
- Numbered list
- Bulleted list
- Horizontal line
- Buttons
- Embedded media
- Image
- Video
- Documents for download
- Basic tables
Accordion
-
Use this component to create a scannable step-by-step list or checklist for users. Accordions are also a great way to break up bulky text. Use them where a page has a lot of content the user doesn’t need to see all at once.
-
Accordions have the same WYSIWIG window as the Basic text component. This means you still have the ability to:
- format headings, paragraphs, quotes and callouts
- add links, bullet points and buttons
- insert images and other types of media.
-
Read our guide to learn how to add .
Cards
Promotion cards
Navigation cards
Call to action cards
Key dates
Card sorting options
Card carousel
Latest events
Image gallery
Complex image
Timelines
News
News listing
News listing (title optional in component)
Data
Data table
Data driven component
Forms
OpenForms
Drupal form
Basic text
This is a basic text component. You use this to add and format body content.
Here's an internal
Here's an external
Headings styles - this is heading 2
This is a heading 3
Heading 4
Heading 5
Quote styles
Block quote
We have two block quote styles. Quotes are used to indicate direct speech. Block quotes can add visual interest to a news article or a case study, but don't overdo them.
This is the block quote with 2 lines of caption. To add this type of block quote, insert the cursor on a new line (paragraph) and click the 'page' icon.
Insert a block quote and then copy and paste to replace the default text with your text. You'll need to copy and paste the source line separately because that has different styling applied in the CSS.
Following is the default text that comes up when you insert a block quote with 2 lines of caption. The 2 lines is created using a line break (Shift + Enter).
Indented quote
This indented quote is created using the icon with the double quotes on it (rollover label is 'block quote'). It displays with both a left and right indent.
Callout styles
Single paragraph callout
This paragraph has the Callout style applied to it. Use it to highlight short pieces of text. It doesn't allow line breaks, headings or lists and it can be difficult to read large passages in this style. It only displays well for a single paragraph.
WYSIWYG callout
How to apply
To apply this callout:
- Format your content as you want with paragraph breaks, headings, lists etc.
- Select the whole block of text that you want to apply the callout style to.
- Click the capital C icon on your toolbar (just next to the table icon).
List formatting and nesting
Numbered list
- Select your text and click on the numbered list icon.
- When you have a numbered list, you can click the indent icon to push selected list items to the next level down.
- Second level numbered list (should be lower case alpha)
- donec egestas ultricies
- neque in elementum (should be lower case roman)
- Fusce blandit
- magna magna (should be ???)
- ut luctus nisl
Bulleted list
- ultricies vitae (style: black/grey dot)
- Quisque ut tortor laoreet
- luctus tellus at (style: circle)
- pretium dolor (style: square)
- Maecenas efficitur
- mi at ipsum egestas (style: square)
- ullamcorper.
- Maecenas
- a lacus nisi.
- mi at ipsum egestas (style: square)
- Morbi dictum feugiat
- odio, nec volutpat
- diam tristique
- vel. Suspendisse dui dui, cursus eleifend ipsum id, pelle
- ntesque dictum sapien
- luctus tellus at (style: circle)
- Fusce eleifend rhoncus orci vitae convallis. Maecenas eleifend ut nunc non commodo. Cras sapien augue, dignissim eu viverra at, placerat eget libero. In at nunc lectus. Curabitur felis libero, lacinia in augue sit amet, gravida congue urna. Nullam id maximus dolor.
Horizontal line
Buttons
Embedded media
Image
The following is an example of an image embedded with a caption.
This is a caption typed into the Embed media screenVideo
The following is an example of a video embedded with a transcript.
Documents for download
Sample doc embedded on SDP testing pages (docx)
Sample doc embedded on SDP testing pages (PDF)
Sample doc embedded on SDP testing pages (xlsx)
Basic tables
Column 1 (as header) | column 2 | column 3 | column 4 |
---|---|---|---|
Next heading | x | y | z |
Next heading 2 | x | y | z |
Next heading 3 | x | y | z |
Next heading 4 | x | y | z |
Reviewed 05 April 2023