How to use the Card and Card.Frame components

The Card and the Card.Frame are the most basic elements of our layouts.

The Card functions as a basic wrapper element on a page and ideally there should only be a single Card on a given page. Inside a Card there can be multiple Card.Frame components, and other elements too.

Before the Facelift, we used to have a different system to arrange elements on a Page.

In the new designs, there shouldn't be a page with more than one Card element. The hasPadding prop has been removed from the interface of the Card and the Card.Frame so padding should be applied around them in all cases.

On this page, you'll find examples of how to use these components correctly.

#Card with Title

import { Card } from '@kinsta/stratus'

const myComponent = () => (
  <Card header="Return of the Jedi">
    The Emperor has been expecting you. I know, father. So, you have accepted the truth. I've accepted the truth that you were once Anakin Skywalker, my father. That name no longer has any meaning for me.
  </Card>
)
Copy

#Card with Title and Buttons

Previously, we used to add the Button-s, Select-s or other components directly to the header prop, but we added the headerRightSlot to the Card and the Frame, that renders the items to the right-hand side of the header.

#❌ This has been the old way, try to avoid it

We had to keep the justifyContent: 'space-between' for the header prop, because of backward compatibility.

import { Card, Button } from '@kinsta/stratus'

const myComponent = () => (
  <Card
    header={
      <>
        Return of the Jedi
        <Button>legacy position</Button>
      </>
    }
  >
    The Emperor has been expecting you. I know, father. So, you have accepted the truth.
  </Card>
)
Copy

#✅ This is the correct way to add buttons or any kind of items to the right-hand side

If you want to add elements next to the header you need to wrap them into a styled component in order to achieve the desired layout.

import { Card, Button, Tag } from '@kinsta/stratus'

const myComponent = () => (
  <Card
    header={
      <Styled.HeaderLayout>
        Return of the Jedi
        <Tag>Live</Tag>
      </Styled.HeaderLayout>
    }
    headerRightSlot={<Button>action</Button>}
  >
    The Emperor has been expecting you. I know, father. So, you have accepted the truth.
  </Card>
)
Copy

It's the same with the Card.Frame:

import { Card, Button } from '@kinsta/stratus'

const myComponent = () => (
  <Card header="Return of the Jedi">
    <Card.Frame
      header="Tatooine"
      headerRightSlot={<Button>action</Button>}
    >
      The Emperor has been expecting you. I know, father. So, you have accepted the truth.
    </Card.Frame>
  </Card>
)
Copy

#Card and Frame with Title and Description

Now both the Card and the Frame has a description prop that applies the Description text formatting to the elements in it.

import { Card } from '@kinsta/stratus'

const myComponent = () => (
  <Card
    header="Return of the Jedi"
    description="Did you hear that?."
  >
    <Card.Frame
        header="Tatooine"
        description="They've shut down the main reactor. We'll be destroyed for sure."
    >
      The Emperor has been expecting you. I know, father. So, you have accepted the truth. I've accepted the truth that you were once Anakin Skywalker, my father. That name no longer has any meaning for me.
    </Card.Frame>
  </Card>
)
Copy

#Card with Frames and a basic layout

Wrap the Frame-s and other elements - like titles - in the Card into a flex or grid and apply the correct margins between them. Usually it's 24px.

import { Card, typography } from '@kinsta/stratus'

const { CardTitle } = typography

const myComponent = () => (
  <Card header="Return of the Jedi">
    {/* The Layout can be a grid or a flex to apply margins between the Frames */}
    <Styled.Layout>
      <Card.Frame
        header="Tatooine"
        description="Did you hear that? They've shut down the main reactor. We'll be destroyed for sure."
      >
        The Emperor has been expecting you. I know, father. So, you have accepted the truth. I've accepted the truth that you were once Anakin Skywalker, my father. That name no longer has any meaning for me.
      </Card.Frame>

      <CardTitle>Palpatine</CardTitle>

      <Card.Frame
        header="Yavin"
        description="Did you hear that? They've shut down the main reactor. We'll be destroyed for sure."
      >
        The Emperor has been expecting you. I know, father. So, you have accepted the truth. I've accepted the truth that you were once Anakin Skywalker, my father. That name no longer has any meaning for me.
      </Card.Frame>
    </Styled.Layout>
  </Card>
)
Copy

#Card with Frames in a Tab layout

When you want to create a UI with Tab components you can use the Frame without border and sorrounding paddings in order to create the desire layout.

import { Card, Tabs } from '@kinsta/stratus'

const myComponent = () => (
  <Card header="Planets">
    <Tabs activeIndex={1} panelGap={400}>
      <Tabs.Panel tabLabel="Alderaan" isMinimal>
        <Card.Frame title="Mos eisley">
          Obi-Wan Kenobi... Obi-Wan? Now that&apos;s a name I haven&apos;t heard in a long time...a long time. I think my uncle knew him. He said he was dead. Oh, hes not dead, not...not yet. You know him! Well of course, of course I know him. Hes me!
        </Card.Frame>
      </Tabs.Panel>

      <Tabs.Panel tabLabel="Naboo">
        <Card.Frame header="Theed" isMinimal>
          I haven&apos;t gone by the name Obi-Wan since oh, before you were born. Then the droid does belong to  you. Dont seem to remember ever owning a droid. Very interesting...
        </Card.Frame>
      </Tabs.Panel>
    </Tabs>
  </Card>
)
Copy

#Card with Frames and Accordion

import { Card } from '@kinsta/stratus'

const myComponent = () => (
  <Card header="Return of the Jedi">
    {/* The Layout can be a grid or a flex to apply margins between the Frames */}
    <Styled.Layout>
      <Card.Frame
        header="Tatooine"
        description="Did you hear that? They've shut down the main reactor. We'll be destroyed for sure."
      >
        The Emperor has been expecting you. I know, father. So, you have accepted the truth. I've accepted the truth that you were once Anakin Skywalker, my father. That name no longer has any meaning for me.
      </Card.Frame>

      <CardTitle>Bounty hunters</CardTitle>

      <Card.Accordion defaultKeys={[1]}>
        <Card.Accordion.Item
          position={1}
          header="Jango Fett"
        >
          <Card.Frame haader="Boba Fett">
            Luke, when gone am I, the last of the Jedi will you be. Luke, the Force runs strong in your family.
          </Card.Frame>
        </Card.Accordion.Item>
        <Card.Accordion.Item
          position={2}
          header="Cad Bane"
        >
          <Card.Frame header="Aurra Sing">
            Pass on what you have learned, Luke. There is...another...Sky...Sky...walker.
          </Card.Frame>
        </Card.Accordion.Item>
      </Card.Accordion>
    </Styled.Layout>
  </Card>
)
Copy

#Card and Frame with TopLoader

import { Card } from '@kinsta/stratus'

const myComponent = () => (
  <Card
    header="Return of the Jedi"
    topLoaderText="Dont seem to remember ever owning a droid. Very interesting..."
    isTopLoading={isCardLoading}
  >
    <Card.Frame
      topLoaderText="Dont seem to remember ever owning a droid. Very interesting..."
      isTopLoading={isFrameLoading}
    >
      The Emperor has been expecting you. I know, father. So, you have accepted the truth. I've accepted the truth that you were once Anakin Skywalker, my father. That name no longer has any meaning for me.
    </Card.Frame>
  </Card>
)
Copy

#Columns

It adds two columns(left and right) with this ratios 2/3 and 1/3.

import { Card } from '@kinsta/stratus'

const myComponent = () => (
  <Card.Columns
    left={
      <Card>
        <Card.Accordion defaultKeys={[]}>
          <Card.Accordion.Item position={1} header={<>Item 1</>}>
            <Card.Frame header="Boba Fett">Item 1 content</Card.Frame>
          </Card.Accordion.Item>
          <Card.Accordion.Item position={2} header={<>Item 2</>}>
            Item 2 content
          </Card.Accordion.Item>
          <Card.Accordion.Item position={3} header={<>Item 3</>}>
            Item 3 content
          </Card.Accordion.Item>
        </Card.Accordion>
      </Card>
    }
    right={
      <Card>
        <Card.Accordion defaultKeys={[]}>
          <Card.Accordion.Item position={1} header={<>Item 1</>}>
            <Card.Frame header="Boba Fett">Item 1 content</Card.Frame>
          </Card.Accordion.Item>
          <Card.Accordion.Item position={2} header={<>Item 2</>}>
            Item 2 content
          </Card.Accordion.Item>
          <Card.Accordion.Item position={3} header={<>Item 3</>}>
            Item 3 content
          </Card.Accordion.Item>
        </Card.Accordion>
      </Card>
    }
  />
)
Copy

---

#See also

• Card.Frame
• Card.Accordion
• Card.Columns