Skip to main content

Cards (Content Groups)

one
two
three
four
five
six
seven
eight
nine
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
six
seven
eight
nine
Image here;
two
three
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
six
seven
eight

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Cards are used to solve the problem of content scannability and comparison. By placing related information within a bounded surface, cards help users quickly understand what belongs together and distinguish one item from another, especially in interfaces that display multiple pieces of content at once.

Use Cards when presenting summaries, previews, or collections of items—such as lists, dashboards, search results, or content grids—where users need to scan, compare, or choose between options. Avoid using cards for long-form or linear content; they are most effective when each card represents a single concept, item, or action.

A Card groups pieces of information into a single item and is normally accompanied by an image

This component would normally have a heading, summary and an image but is flexible enough to support some or all these items. These "structural" elements will have a specific brand identity and influence SEO and accessibility.

This is a placeholder image in a widescreen format( 16:9)

It also can just support free text when you don't want to add structural elements. Structural elements will always have a specific design identity attached while free text will just display as normal in the content flow.

Cards will adjust their layout according to the screen size unless layout restrictions are specifically applied.

Weights

Cards can be used with varying weights to highlight it's importance in the flow of information. Higher weighted items give more importance compared to the rest of the content on the page.

By default all Cards will have a no weight

Card - no weight

The quick brown fox jumps over the lazy dog

Card - normal weight (default)

The quick brown fox jumps over the lazy dog

Card - light weight

The quick brown fox jumps over the lazy dog

Card - moderate weight

The quick brown fox jumps over the lazy dog

Card - high weight

The quick brown fox jumps over the lazy dog

Layout

Cards will automatically adjust to the available space to meet accessibility requirements. By default the content will be left aligned with the image aligned to the right (if an image is provided). If the container does not have enough space the Card will stack vertically.

Pro tip

If you only see cards vertically stacked, increase the size of your browser window. Left and Right alignment will only work when there is enough space (especially when using an image)

Card - left aligned

The quick brown fox jumps over the lazy dog

This is a placeholder image in a widescreen format( 16:9)

Card - center aligned

The quick brown fox jumps over the lazy dog

This is a placeholder image in a widescreen format( 16:9)

Card - right aligned

The quick brown fox jumps over the lazy dog

This is a placeholder image in a widescreen format( 16:9)


Page payload data

This component is currently in development

 

Sunshine Coast Open Space Landscape Infrastructure Manual (LIM) DISCLAIMER

Disclaimer

Information contained in this document may change without notice and you should use the current material available from Council’s website and not rely on material previously printed or stored by you.

All figures and diagrams are intended to be used as an aid to design and include Council’s preferred elements but they are not intended to be prescriptive and may need to be varied as dictated by site specific factors. While Council has exercised reasonable care in preparing this document, it does not warrant or represent that it is accurate or complete. The Council will not accept responsibility for any loss, damage, cost or expense that you may incur as a result of the use of or reliance upon any material contained in this document.

This document is produced to convey general information and is not intended to constitute advice whether professional or legal. Any reference to legislation in this document is not an interpretation of the law. It is to be used as a guide only. Consult relevant authority websites for current documents, revisions and amendments.

Where a particular product or supplier is profiled in this document, Council is NOT nominating this product or supplier as the selected choice. Product/supplier information has been provided to allow users to source products which contain the correct elements required for Council embellishments. Each product profiled states ‘or equivalent’ which means that different products may be supplied provided they satisfy the identified performance criteria, recommended standards, equal access guidance and product specifications.

Product design, manufacture and installation requires appropriately qualified people to provide site specific solutions to ensure the embellishment is appropriately adapted to local conditions and data.

This document does not override requirements stipulated in a development approval. Project specific variations may be appropriate as a result of site, environmental or other constraints. Any variations to these standards must be approved in writing by council prior to commencement of variation works. Components of this document may be used within a contract document but users should undertake their own investigations to confirm the information is suitable for this purpose.

Drawings contained in this document are NOT FOR CONSTRUCTION.

Details in this document are deemed to be the minimum standard and the user may wish to apply a higher standard subject to approval by council.

Acknowledgements

Council wishes to thank all contributors and stakeholders involved in the development of this document.

Copyright

Sunshine Coast Regional Council (Council) supports and encourages the distribution of its material however, copyright protects this document. Council has no objection to this material being reproduced but only if council is recognised as the owner of the copyright and this material remains unaltered.

https://www.sunshinecoast.qld.gov.au[email protected]07 5475 7272

Sunshine Coast Open Space Landscape Infrastructure Manual (LIM)

 | 

© LIM 2024 – 2026

 | 

Version 0.0.38.beta

 | 

Last Updated: 01/04/2026 12:27 AM

Preview