Cards

A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

card image
user name

A day under the sun

By Sue, jun 3 2023

After a walk through history, there is nothing left to do but admire the hypnotizing landscapes that exist in every direction. From vast deserts to rainbow mountains, and everything in between.

Variations

Basic Card

Something to remember

All components can be copied and pasted and easily implemented in your tailwind css projects. You can either copy all the components in the preview window from the copy icon on the top right corner in the code blocks or just hover and click on the one component you need and paste it on your project.

copydone

Card with Icon

Icon titleA more detailed description of the icon

Bonus

All components come with proper attributes to ensure full accessibility with the WAI-ARIA standards. Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.

copydone

Card with Subtitle

A place under the night sky

By George Johnson, jun3 28

There’s nothing better than hiking along the rocky footpaths, accompanied only by the noise of cicadas. As the boat docks in the harbor, gaze upon white and blue houses, craggy cliffs, sweeping olive groves, and the dazzling blues of the Aegean sea.

copydone

Basic Image Card

card image

Memories of the past

By George, jun 3 2023

copydone

Basic Blog Card

card image

The easy way to go

By George, jun 3 2023

Experience the simple pleasures of a world with no cars, and only gentle walks through palm tree forests, and fallen coconuts. An island that’s home to extraordinary cliffs, swelling oceans, and mammoth manta rays.

copydone

Blog Card with Avatar

card image
user name

Stairing at the sky

By Sue Longarm, jun 3 2023

Following the journey of history and culture, is a journey through the beautiful green rice paddies, and endless golden fields! Dotted amongst the countryside are bustling towns, with a vibrant atmosphere and great cafe culture.

copydone

Blog Card with Action Button

card image
user name

In the urban Jungle

By Mary Jay, jun 3 2023

Day to day life operates outside, so get ready to see the beach become the living room, and the street the kitchen. A simple, yet beautiful, way of life that explains the sunny outlook.

copydone

E-commerce Card

card image

Greek breakfast

$8.99

Blueberry Superpower: Vanilla Greek Yogurt + Fresh Blueberries + Granola + Honey.

copydone

Social Story Card

user name

Looking back at time

By Mary Jay, jun 3 2023

card image

Spend days here, exploring a way of life by bicycle. Discover cobbled streets sandwiched between beautiful rickety townhouses and the lazy flow of the canal.

copydone

User Profile Card

user name

Nichole Jones

Senior Designer

copydone

Card with Form

Login

Type your email address
Input field with trailing icon
copydone

Image Overlay Card

card image

Most famous beaches

By George, jun 3 2023

copydone

Horizontal Card

On small screens the horizontal card turns to a normal card. Resize your browser to see the card's behavior on small screens.

card image
user name

A day in the sun

By Sue, jun 3 2023

After a walk through history, there is nothing left to do but admire the hypnotizing landscapes that exist in every direction. From vast deserts to rainbow mountains, and everything in between.

copydone

Empty Card

copydone

Usage

Cards are elements that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information.

Specs

Cards have no singular layout, typographic, or image size. They can include:

  • Card header: the card header can include a title, subtitle and even a user avatar. The card header has inner padding of 1.5rem (24px).
  • Card image: the card's image expands to the full width of the card (or half in horizontal cards).
  • Card body: The main area of the card. It has inner padding of 1.5rem (24px). If the card's body is following the header the top padding is removed.
  • Card action: This area includes a set of actions (links or buttons) and has horizontal padding of 0.5rem (8px) so that the button text is aligned with the card's body text.

Accessibility notes

There’s no accessibility standard to follow, no <card> element or an ARIA design pattern. Instead, the potential accessibility barriers you might encounter are depending on the card’s purpose and content.

Check out the latest release!