Close

Card 

About the component

The Card component can show an image, a title, rich-text, and optionally link to further content.

Points to remember about this component

  • Card styles have changed to have sharp edges
  • The new card component will replace the old Card component and Card (deprecating) component

View the component style options

Click here for figma link

  1. Clickable Card with Border (Set Equal Height not selected)
  2. Clickable Card with Border (Set Equal Height selected)
  3. Clickable Card with no Border
  4. Clickable Card with Small Shadow
  5. Clickable Card with Large Shadow
  6. Non-Clickable Card with Border
  7. Non-Clickable Card with no Border
  8. Non-Clickable Card with Small Shadow
  9. Non-Clickable Card with Large Shadow

Non-Clickable Card with Border 

Use case: heavy content blocks on page where a link is not required. Example is the more speed page which currently uses icons (alternate to icons) 

Example Page

New Developments Training

Future-proof your skills by becoming an nbn™ trained New Developments supplier – designer or installer.

New Development FAQs

Find answers to frequently asked questions.

Industry collaboration and community planning

Information for enabling the construction industry and advancing local government collaboration

Non-Clickable Card with No Border 

To be used for our new illustrations

New Developments Training

Future-proof your skills by becoming an nbn™ trained New Developments supplier – designer or installer.

New Development FAQs

Find answers to frequently asked questions.

Industry collaboration and community planning

Information for enabling the construction industry and advancing local government collaboration

Non-Clickable Card with Small Shadow

Shadow option should not be used with non-clickable cards as it gives the illusion the card is actually clickable when it's not

New Developments Training

Future-proof your skills by becoming an nbn™ trained New Developments supplier – designer or installer.

New Development FAQs

Find answers to frequently asked questions.

Industry collaboration and community planning

Information for enabling the construction industry and advancing local government collaboration

Non-Clickable Card with Large Shadow

No shadow option should be used

New Developments Training

Future-proof your skills by becoming an nbn™ trained New Developments supplier – designer or installer.

New Development FAQs

Find answers to frequently asked questions.

Industry collaboration and community planning

Information for enabling the construction industry and advancing local government collaboration

How to author the component

  1.  Hover over the blue box that says “Drag components here”, click on it, then click the ‘plus’ icon.
  2. Choose the "Container (new)" component from "NBN Components refresh" group. All components need to be within a container. This step is not required if a container already exists.
  3. By default the container component will take full width. Click on container component and click on in-style icon and change the style to fixed width
  4. Hover over the blue box within the container component that says “Drag components here”, click on it, then click the ‘plus’ icon.'
  5. Choose "Column Control (New)" under the "NBN Components (Refresh)" group. Ususally card component is added within a column control. This step can be ignore based on the style of the page.
  6. Column control component with default 3 columns is added. Click on configure and change the number of columns in the properties tab. Click on configure and change the layout of the column control to 4 columns.
  7. Click on "drag components" in the first column and select "Card (nbn)" under the "NBN Components (Refresh)" group. Similarly add card component in the rest of the columns.
  8. Click on Card component in the first column and then click on configure
  9. To create a card that does not link, leave the link tab blank. Alternatively if the card needs to link to a page, select the page by navigating through the internal folders.
  10. Enter the Pretitle, Title, Description for the card in the tab named "Text".
  11. Enter the Id if this component needs to be tracked for analytics.
  12. Click on Asset tab, uncheck "Inhertit feature image from page", drag and drop an image from assets in the box shown.
  13. Enter an alternative text by unchecking "Inherit from description of asset" or leave it as is to use the description of the asset. If the image is descriptive and doesn't convey a message to the visitor, check the box at the bottom that says "Don't provide an alternative text" which will hide the "Alternative text for Accessibility" section.
  14. Click on Style tab to choose an appropriate style .
  15. Click on Done to complete authoring the component.