Below you will find an example of all the components available for content types. These components have been styled with responsive mobile first design.
Need help?
If you notice any issues with styling or functionality, email us with a screenshot and steps to help us recreate the issue.
|
1. Accordion |
13. Links |
|
|
8. Embed |
14. Multi Column |
|
|
3. Carousel |
9. Expandable |
15. Steps |
|
4. Content List |
10. Featured Links |
16. Text on Image |
|
5. CTA |
11. Flag |
17. Timeline |
|
6. Downloads |
12. Image Gallery |
18. Webform |
The accordion is a graphical control element comprising a vertically stacked list of items. Each item can be "expanded" or "collapsed" to reveal the content associated with that item.
Welcome to the realm of boundless creativity and inspiration! In this section, we invite you to explore the endless possibilities that lie within your imagination. Our mission is to ignite the spark of creativity and encourage you to embark on a journey of self-expression and innovation.
Inner Exploration: Unleash your inner world onto your chosen medium, connecting with emotions and experiences that make you uniquely you.
Comedy Canvas: Explore the art of laughter painting, where each chuckle adds a splash of colour to your masterpiece.
By seeing the world through a humor-tinted lens, you can uncover unexpected angles and viewpoints.
Carousels display a series of cards that can showcase a link, an image, and a brief some text. You can have any number of cards.
|
Recommended character limits: 40 title 100 description |
Recommended image dimensions: 3:2 resizes images to exactly 384 x 256 px (previously labelled as Default) 1:1 allows any size up to 600 x 600 px (previously labelled as Small) |
This Basic Content component and its formatting capabilities are available on most components. It allows the most common formatting capabilities available in most text editors, such as setting header styles, adding icons, tables, viewing the source code and embedding assets. For example, the next line uses a Block Quote:
This is a Block Quote.
For more complex html editing, and depending on your permission levels, this component also allows different text formats such as:
Most components will include the use of the Basic Content component. For example, see the Accordion, the Multicolumn, and Steps.
You can even embed items without using a separate Embed or Downloads component. Here's are some examples:
Select the Media Entity Embed icon, choose/upload your file, apply any additional information, then select Embed.
Select the Media Entity Embed icon, choose/upload your image, select your desired affects, then select Embed.
The URL needs to follow this example for the icon to appear: https://www.google.com/maps/place/City+of+Darebin,+VIC/@-37.734388,144.9959202,13z/data=!4m6!3m5!1s0x6ad645b4be63b931:0x5d9e91bc29ba516b!8m2!3d-37.727768!4d145.016269!16zL20vMDJjX3Fu?entry=ttu
Apply your URL to a link, then the link is automatically styled: Google map example.
| Header 1 |
Header 1 |
| Header 2 |
Header 2 |
| Header 3 |
Header 3 |
| Header 4 |
Header 4 |
| Header 5 |
Header 5 |
| Header 6 |
Header 6 |
To apply these button styles, first write your link text, add a link, then select from the Styles drop-down and choose a button.
|
Primary buttons |
Secondary buttons |
Click me No, click me How about me? |
Callout Div styles can be applied by highlighting the desired content, either choose from the Styles dropdown OR choose the DIV</>, button then select the style.
The Styles dropdown allows for individual line design without icons, whereas the DIV</> button allows styling for the entire selected text, with icons.
Callout - General
By selecting enter or dropping to a new line, turn the top phrase to a Title.
Callout - Contact
Callout -Information
Callout - Alert
Callout - Emergency
Callout - Warning
Callout - Yes
Callout - No
Content Lists can be used to display a series of hand-picked Events, Venue or Landing pages to describe or support your information. These pages will display the Overview details (Title, Summary and Image) of the page. They're available in 2, 3, and 4 column designs.
If no images or description appear, it means that the Summary and Featured Image has not yet been set for each page.
For example, this list below is a set of venues, displayed in 2 columns.
For example, this list below is a set of events, displayed in 3 columns.
For example, this list below is a set of landing pages, displayed in 4 columns.
This is a Call-to-Action styled banner that calls the users attention.
Add a description here of what you'd like your user to do.
This component is used for files such as images, audio, any documentation including TRIM documents. If you update the TRIM document, the file uploaded to this component will also update.
Permitted file types:
txt rtf doc docx ppt pptx xls xlsx pdf odf odg odp ods odt fodt fods fodp fodg key numbers pages.
Dynamic Views allow editors to automatically display an array of pages associated with a tag or part of a menu structure. This display will automatically update if the pages are created , edited, or removed. The page array can also be sorted based on arguments, and can allow website visitors to view more.
Dynamic View: Articles, Latest Block, Includes View Title
This can be used to display embedded gifs, images and other media.
A series of links used to showcase particular URL locations.
Left aligned with the Breakout style.
Showcase your information with a left or right aligned image with accompanying text and link. Flags are only available on Landing pages.
Recommended character count:
200 for Description
80 for Link text
Recommended image dimensions:
840 x 640 px for Style/Breakout
600 x 400 px for Style/Default
Using the Style/Default, Image Position/Left
600 x 400 px for Style/Default
Using the Style/Default, Image Position/Right
600 x 400 px for Style/Default
There is no limit to amount of images you can add for display. Each image opens in a lightbox, and if a caption is provided to the media entity, it will display within the lightbox.
This component allows a short description, accompanied by a link.
I love cheese, especially parmesan camembert de normandie. Swiss who moved my cheese parmesan cheddar cheesecake cheese strings squirty cheese st. agur blue cheese.
Chalk and cheese bocconcini the big cheese cream cheese hard cheese roquefort everyone loves danish fontina.
Babybel fromage airedale red leicester blue castello gouda cheesecake queso. Rubber cheese ricotta jarlsberg monterey jack macaroni cheese paneer boursin cheesecake.
Dolcelatte squirty cheese roquefort taleggio pecorino who moved my cheese.
I love cheese, especially edam caerphilly. Lancashire ricotta stilton who moved my cheese say cheese squirty cheese st. agur blue cheese smelly cheese.
Cheese strings cauliflower cheese fondue bavarian bergkase port-salut st. agur blue cheese brie cheesecake. Cheese and wine stilton ricotta fromage emmental queso lancashire cheeseburger.
The Multi Column component allows you to display your content using more than 1 column, in fact, it comes in 2, 3 or 4 columns, similar to the Carousel which includes the 3:2 ratio, 1:1 ratio featured image that can be set. You can have any number of "cards" in the Multicolumn.
|
Recommended character limits: 40 title 100 description |
Recommended image dimensions: 3:2 resizes images to exactly 384 x 256 px (previously labelled as Default) 1:1 allows any size up to 600 x 600 px (previously labelled as Small) |
Steps are used for instructional processes. The numbers are automatically applied with every new Text and Title.
Blue castello camembert de normandie red leicester. Hard cheese edam cheese triangles cheese and wine fromage feta caerphilly dolcelatte. Pepper jack danish fontina fromage frais cheesy grin pecorino cheese and biscuits paneer chalk and cheese.
Cheese slices queso smelly cheese. Cheese slices cut the cheese ricotta hard cheese monterey jack fondue cheesy grin rubber cheese.
Caerphilly, bocconcini. Taleggio cheese and biscuits monterey jack red leicester cheesecake fromage frais cheddar.
Third step with no title, this is written the description.
It uses a Basic Content component to deliver this text and formatting. This Text on Image has Content Position/Middle, no link or link text and no image applied.
Recommended character count
60 for title
180 for description
Recommended image dimensions
1200 x 400 px
This normal Text on Image has the Content Position/Left with an image, link and link text applied.
This normal Text on Image has the Content Position/Right with an image, link and link text applied.
Record important sequence of events with the Timeline component. Only available on Landing pages.
Recommended character count
60 for Title
180 for Description
It can embed any form that has been built in District. You can set the Status of Open, Close or Scheduled to the form submissions or enter more complex arguments using YAML. This particular form uses a field that only displays Darebin-based addresses.
