> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/8.card.md).

# Card

### Card Props <a href="#card-props" id="card-props"></a>

| Name                      | Type    | Default                                                                   | Description                                                       |
| ------------------------- | ------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| colors                    | object  |                                                                           | Object with Tailwind CSS colors classes                           |
| colors.bgIos              | string  | 'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'                       |                                                                   |
| colors.bgMaterial         | string  | 'bg-md-light-surface-1 dark:bg-md-dark-surface-1'                         |                                                                   |
| colors.footerTextIos      | string  | 'text-black text-opacity-55 dark:text-white dark:text-opacity-55'         |                                                                   |
| colors.footerTextMaterial | string  | 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'   |                                                                   |
| colors.outlineIos         | string  | 'border-black border-opacity-20 dark:border-white dark:border-opacity-20' |                                                                   |
| colors.outlineMaterial    | string  | 'border-md-light-outline dark:border-md-dark-outline'                     |                                                                   |
| colors.textIos            | string  | ''                                                                        |                                                                   |
| colors.textMaterial       | string  | 'text-md-light-on-surface dark:text-md-dark-on-surface'                   |                                                                   |
| component                 | string  | 'div'                                                                     | Component's HTML Element                                          |
| contentWrap               | boolean | true                                                                      | Wraps card content with extra element with padding                |
| contentWrapPadding        | string  | 'p-4'                                                                     | Content wrap padding (if `contentWrap` enabled)                   |
| footer                    | string  |                                                                           | Content of the Card footer                                        |
| footerDivider             | boolean | false                                                                     | Enabled divider between footer and content                        |
| header                    | string  |                                                                           | Content of the Card header                                        |
| headerDivider             | boolean | false                                                                     | Enabled divider between header and content                        |
| margin                    | string  | 'm-4'                                                                     | Tailwind CSS margin class                                         |
| outline                   | boolean | undefined                                                                 | Makes card outline. Overwrites `outlineIos` and `outlineMaterial` |
| outlineIos                | boolean | false                                                                     | Makes card outline in iOS theme                                   |
| outlineMaterial           | boolean | false                                                                     | Makes card outline in Material theme                              |
| raised                    | boolean | undefined                                                                 | Makes card raised. Overwrites `raisedIos` and `raisedMaterial`    |
| raisedIos                 | boolean | false                                                                     | Makes card raised in iOS theme                                    |
| raisedMaterial            | boolean | false                                                                     | Makes card raised in Material theme                               |

### Card Slots

| Name   | Description                |
| ------ | -------------------------- |
| footer | Content of the Card footer |
| header | Content of the Card header |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Cards" />

    <i-block-title :with-block="false">Simple Cards</i-block-title>
    <i-card>
      This is a simple card with plain text, but cards can also contain their
      own header, footer, list view, image, or any other element.
    </i-card>
    <i-card header="Card header" footer="Card footer">
      Card with header and footer. Card headers are used to display card titles
      and footers for additional information or just for custom actions.
    </i-card>
    <i-card>
      Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
      Mauris aliquet magna justo.
    </i-card>

    <i-block-title :with-block="false">Outline Cards</i-block-title>
    <i-card outline>
      This is a simple card with plain text, but cards can also contain their
      own header, footer, list view, image, or any other element.
    </i-card>
    <i-card outline header="Card header" footer="Card footer">
      Card with header and footer. Card headers are used to display card titles
      and footers for additional information or just for custom actions.
    </i-card>
    <i-card outline>
      Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
      Mauris aliquet magna justo.{' '}
    </i-card>

    <i-block-title :with-block="false">Outline With Dividers</i-block-title>
    <i-card
      outline
      header="Card header"
      footer="Card footer"
      header-divider
      footer-divider
    >
      Card with header and footer. Card headers are used to display card titles
      and footers for additional information or just for custom actions.
    </i-card>

    <i-block-title :with-block="false">Raised Cards</i-block-title>
    <i-card raised>
      This is a simple card with plain text, but cards can also contain their
      own header, footer, list view, image, or any other element.
    </i-card>
    <i-card raised header="Card header" footer="Card footer">
      Card with header and footer. Card headers are used to display card titles
      and footers for additional information or just for custom actions.
    </i-card>
    <i-card raised>
      Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
      Mauris aliquet magna justo.{' '}
    </i-card>

    <i-block-title :with-block="false">Card With List View</i-block-title>
    <i-card>
      <i-list nested class="-m-4">
        <i-list-item href title="Link 1" />
        <i-list-item href title="Link 2" />
        <i-list-item href title="Link 3" />
        <i-list-item href title="Link 4" />
        <i-list-item href title="Link 5" />
      </i-list>
    </i-card>

    <i-block-title :with-block="false">Styled Cards</i-block-title>
    <div class="lg:grid lg:grid-cols-2">
      <i-card outline>
        <template #footer>
          <div class="flex justify-between material:hidden">
            <i-link>Like</i-link>
            <i-link>Read more</i-link>
          </div>
          <div
            className="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse"
          >
            <i-button rounded inline> Like </i-button>
            <i-button rounded inline outline> Read more </i-button>
          </div>
        </template>
        <div
          class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
          :style="{
            'background-image':
              'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
          }"
        >
          Journey To Mountains
        </div>
        <div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
        <p>
          Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
          efficitur vitae non felis. Phasellus quis nibh hendrerit...
        </p>
      </i-card>
      <i-card>
        <template #footer>
          <div class="flex justify-between material:hidden">
            <i-link>Like</i-link>
            <i-link>Read more</i-link>
          </div>
          <div
            className="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse"
          >
            <i-button rounded inline> Like </i-button>
            <i-button rounded inline outline> Read more </i-button>
          </div>
        </template>
        <div
          class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
          :style="{
            'background-image':
              'url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)',
          }"
        >
          Lorem Ipsum
        </div>
        <div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
        <p>
          Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
          efficitur vitae non felis. Phasellus quis nibh hendrerit...
        </p>
      </i-card>
    </div>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iCard,
    iBlockTitle,
    iList,
    iListItem,
    iLink,
    iButton,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iCard,
      iBlockTitle,
      iList,
      iListItem,
      iLink,
      iButton,
    },

  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Card,
  BlockTitle,
  List,
  ListItem,
  Link,
  Button,
} from 'ina-ui/react';

export default function CardsPage() {
  return (
    <Page>
      <Navbar
        title="Cards"
        />

      <BlockTitle withBlock={false}>Simple Cards</BlockTitle>
      <Card>
        This is a simple card with plain text, but cards can also contain their
        own header, footer, list view, image, or any other element.
      </Card>
      <Card header="Card header" footer="Card footer">
        Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom
        actions.
      </Card>
      <Card>
        Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
        Mauris aliquet magna justo.
      </Card>

      <BlockTitle withBlock={false}>Outline Cards</BlockTitle>
      <Card outline>
        This is a simple card with plain text, but cards can also contain their
        own header, footer, list view, image, or any other element.
      </Card>
      <Card outline header="Card header" footer="Card footer">
        Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom
        actions.
      </Card>
      <Card outline>
        Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
        Mauris aliquet magna justo.{' '}
      </Card>

      <BlockTitle withBlock={false}>Outline With Dividers</BlockTitle>
      <Card
        outline
        header="Card header"
        footer="Card footer"
        headerDivider
        footerDivider
      >
        Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom
        actions.
      </Card>

      <BlockTitle withBlock={false}>Raised Cards</BlockTitle>
      <Card raised>
        This is a simple card with plain text, but cards can also contain their
        own header, footer, list view, image, or any other element.
      </Card>
      <Card raised header="Card header" footer="Card footer">
        Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom
        actions.
      </Card>
      <Card raised>
        Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
        Mauris aliquet magna justo.{' '}
      </Card>

      <BlockTitle withBlock={false}>Card With List View</BlockTitle>
      <Card>
        <List nested className="-m-4">
          <ListItem href title="Link 1" />
          <ListItem href title="Link 2" />
          <ListItem href title="Link 3" />
          <ListItem href title="Link 4" />
          <ListItem href title="Link 5" />
        </List>
      </Card>

      <BlockTitle withBlock={false}>Styled Cards</BlockTitle>
      <div className="lg:grid lg:grid-cols-2">
        <Card
          outline
          footer={
            <>
              <div className="flex justify-between material:hidden">
                <Link>Like</Link>
                <Link>Read more</Link>
              </div>
              <div className="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse">
                <Button rounded inline>
                  Like
                </Button>
                <Button rounded inline outline>
                  Read more
                </Button>
              </div>
            </>
          }
        >
          <div
            className="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
            style={{
              backgroundImage:
                'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
            }}
          >
            Journey To Mountains
          </div>
          <div className="text-gray-500 mb-3">Posted on January 21, 2021</div>
          <p>
            Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
            efficitur vitae non felis. Phasellus quis nibh hendrerit...
          </p>
        </Card>
        <Card
          footer={
            <>
              <div className="flex justify-between material:hidden">
                <Link>Like</Link>
                <Link>Read more</Link>
              </div>
              <div className="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse">
                <Button rounded inline>
                  Like
                </Button>
                <Button rounded inline outline>
                  Read more
                </Button>
              </div>
            </>
          }
        >
          <div
            className="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
            style={{
              backgroundImage:
                'url(https://cdn.framework7.io/placeholder/people-1000x600-3.jpg)',
            }}
          >
            Journey To Mountains
          </div>
          <div className="text-gray-500 mb-3">Posted on January 21, 2021</div>
          <p>
            Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
            efficitur vitae non felis. Phasellus quis nibh hendrerit...
          </p>
        </Card>
      </div>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/8.card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.