Card Layouts

cards

The diagrams shows a 3 column card layout where each card comprises an image with text arranged underneath.

“Cards” are a design pattern used to display information in a visually organised and engaging manner making it easy to browse and consume.

Each card acts as a container for related information, encapsulating content in a cohesive unit.

A card typically contains an image, a title, a brief description, and sometimes interactive elements like buttons or links.

On this page, you’ll find a variety of card designs, each tailored to different purposes and styles.

Feel free to explore the examples below and find the perfect card design that fits your project’s requirements. Whether you’re looking for inspiration or ready-to-use designs, our collection aims to provide you with the tools you need to create a stunning and functional web experience.

Section 1

cards section 1 mobile original

The mobile view

cards section desktop 1 original

The desktop view

Mobile View:

  • Each card comprises an icon, title, description and a button
  • The cards are stacked.

Desktop View:

  • Each card comprises an icon, title, description and a button
  • The cards are arranged into 3 rows and columns.

View in a browser:

  • When viewing in a browser, try narrowing the screen to see the mobile view.
View in a Browser

Section 2

card section for mobile

The mobile view

cards section 2 desktop original

The desktop view

Mobile View:

  • The title, description, images and quote are arranged vertically on a mobile.

Desktop View:

  • Content split 50/50 (adjustable)
  • Title, description and image stacked on the left.
  • An image and quote stacked on the left.

View in a browser:

  • When viewing in a browser, try narrowing the screen to see the mobile view.
View in a Browser

Section 3

cards section for mobile devices

The mobile view

cards section for desktop devices

The desktop view

Mobile View:

  • The section displays the heading and title followed by the cards. Each card comprises an image, title, description and a link to a page which can show more detail.
  • The cards are stacked.

Desktop View:

  • The section displays the heading on the left and title on the right followed by the cards arranged in 3 columns.
  • Each card comprises an image, title, description and a link to a page which can show more detail.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser

Section 4

card section for mobile devices

The mobile view

card section in desktop device view

The desktop view

Mobile View:

  • The section displays the heading, title and descriptive text followed by the cards.
  • Each card comprises an image, title & descriptive text.
  • The section is stacked into a single column

Desktop View:

  • The section displays the heading, title and descriptive text.
  • The cards are arranged in 3 columns.
  • Each card comprises an image followed by a title and descriptive text.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the screen to see the mobile view.
View in a Browser

Section 5

card section for mobile devices

The mobile view

cards section for desktop devices

The desktop view

Mobile View:

  • The section displays the heading and title followed by the cards.
  • Each card comprises an image, title and formatted text.

Desktop View:

  • The section displays the heading & title
  • The cards are arranged in 3 columns.
  • Each card comprises an image followed by a title and descriptive text.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser