Components / Card

Card

# Introduction

Card is a container component that can be used to display content in a structured way. It can be used to display images, text, and buttons.

# Usage

Below you can find the basic usage of the Card component. You can use <zinq:card.title> or <zinq:card.description> to add a title or description to the card.
You can also put whatever content you want inside the card.

Users

Browse and manage users

  
<zinq:card class="max-w-xs">
    <zinq:card.title>Users</zinq:card.title>
    <zinq:card.description>Browse and manage users</zinq:card.description>
    <zinq:button class="mt-6">Go to users &rarr;</zinq:button>
</zinq:card>

# Button

You can add <zinq:card.link> to add a button to the card. You can also add a href attribute to the link to make it a clickable link.

Users

Browse and manage users

  
<zinq:card flat class="max-w-xs">
    <zinq:card.title>Users</zinq:card.title>
    <zinq:card.description>Browse and manage users</zinq:card.description>
    <zinq:card.link href="#" />
</zinq:card>

# Category

You can add <zinq:card.category> to add a category to the card.

admin
Users

Browse and manage users

  
<zinq:card flat class="max-w-xs">
    <zinq:card.category>admin</zinq:card.category>
    <zinq:card.title>Users</zinq:card.title>
    <zinq:card.description>Browse and manage users</zinq:card.description>
    <zinq:card.link href="#" />
</zinq:card>

# Variants

Card has a few variants that can be used to change the appearance of the card. Below you can find the available variants.

# Flat

The flat variant removes the shadow from the card.

admin
Users

Browse and manage users

  
<zinq:card flat class="max-w-xs">
    <zinq:card.category>admin</zinq:card.category>
    <zinq:card.title>Users</zinq:card.title>
    <zinq:card.description>Browse and manage users</zinq:card.description>
    <zinq:card.link href="#" />
</zinq:card>

# Inverse

The inverse variant changes the color of the text to white and the background to the dark color. It inverses the colors of the card in the dark mode.

admin
Users

Browse and manage users

  
<zinq:card flat inverse class="max-w-xs">
    <zinq:card.category>admin</zinq:card.category>
    <zinq:card.title>Users</zinq:card.title>
    <zinq:card.description>Browse and manage users</zinq:card.description>
    <zinq:card.link href="#" />
</zinq:card>

# Emerald

admin
Users

Browse and manage users

  
<zinq:card flat emerald class="max-w-xs">
    <zinq:card.category>admin</zinq:card.category>
    <zinq:card.title>Users</zinq:card.title>
    <zinq:card.description>Browse and manage users</zinq:card.description>
    <zinq:card.link href="#" />
</zinq:card>

# Fuchsia

admin
Users

Browse and manage users

  
<zinq:card flat fuchsia class="max-w-xs">
    <zinq:card.category>admin</zinq:card.category>
    <zinq:card.title>Users</zinq:card.title>
    <zinq:card.description>Browse and manage users</zinq:card.description>
    <zinq:card.link href="#" />
</zinq:card>

# Yellow

admin
Users

Browse and manage users

  
<zinq:card flat yellow class="max-w-xs">
    <zinq:card.category>admin</zinq:card.category>
    <zinq:card.title>Users</zinq:card.title>
    <zinq:card.description>Browse and manage users</zinq:card.description>
    <zinq:card.link href="#" />
</zinq:card>

# Grid

You can use the grid component to display multiple cards in a grid layout.

You can use the cols attribute to specify the number of columns in the grid. The Card component will narrow down to fit the number of columns specified by current screen size.

Users

Browse and manage users

Settings

Manage your account settings

Notifications

Manage your notifications

Profile

Manage your profile

  
<zinq:card.grid cols="4">
    <zinq:card emerald>
        <zinq:card.title>Users</zinq:card.title>
        <zinq:card.description>Browse and manage users</zinq:card.description>
        <zinq:card.link href="#" />
    </zinq:card>
    <zinq:card inverse>
        <zinq:card.title>Settings</zinq:card.title>
        <zinq:card.description>Manage your account settings</zinq:card.description>
        <zinq:card.link href="#" />
    </zinq:card>
    <zinq:card fuchsia>
        <zinq:card.title>Notifications</zinq:card.title>
        <zinq:card.description>Manage your notifications</zinq:card.description>
        <zinq:card.link href="#" />
    </zinq:card>
    <zinq:card yellow>
        <zinq:card.title>Profile</zinq:card.title>
        <zinq:card.description>Manage your profile</zinq:card.description>
        <zinq:card.link href="#" />
    </zinq:card>
</zinq:grid>