Back to all components

Card

A card is a flexible and customisable content container used to display information such as text, images, and links in a structured way.

Cards are ideal for organising related content in a visually appealing format. They are very useful for users to navigate to major sections of the website.


Key Features
  • Flexible Layout: Can include headers, buttons, images, and content in various combinations.
  • Responsive Design: Adjusts to different screen sizes and layouts.
  • Customisable: Easily styled with additional classes, supporting images, buttons, and links.
  • Organised Content: Keeps information tidy and visually grouped.

 

Examples
  • Product Listings: Display product images, descriptions, and prices
  • Blog Posts: Show blog post previews with an image, title, and excerpt.
  • Profile Cards: Present team profile information with photos and links to more information.
  • Website Pages: Present previews to other sections of your website


Card Header (Header 5)

Size 3
Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here.


Card Header (Header 5)

Size 3

Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here.


Card Header (Header 5)

Size 3 

Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here.


Card Header (Header 5)

Size 3 

Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here.



Pro tips

With most of these components you can elect that the button will open the link in a new window. You can also leave off the button text or URL and the button will be hidden.

When you have mismatched content height, to alighn the height of these controls you can use some rebuild Custom Classes codes to force the element height. e.g. use height450 to make these controls all the height 450px minimum, so the all look the same. (also try height600, height550, height500, height400, height350, height300)

Variations

You can change the width, custom styles and the header and body text are both full WYSIWYG editors.

Card Header (Header 5)

Size 4| Blue Jeans

Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here.


Card Header (Header 5)

Size 4| Sunflower

Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here. Body text goes here.


Next

Carousel

User can use the left/right icons to force a change and the dots at the bottom of the carousel. Note: there are also some controls that carousel items for you. For example, if you had a document library with just images in it, you could...

Read More