Components

Card

Display content or actions related to a single subject

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Display content or actions related to a single subject

import { Card, CardHeader, CardBody, CardFooter, Body, Grid } from 'legion-ui';

Variant

Cards can be given a variety of visual styles. There are three variants: shadow, flat, and bordered.

Flat Card

Sub Title

Some quick example text to build on the card title and content.

Bordered Card

Sub Title

Some quick example text to build on the card title and content.

Shadow Card

Sub Title

Some quick example text to build on the card title and content.

<div className="wrapper-display-component-three">
  <div className="item-three" style="text-align: unset;">
    <Card variant="flat">
      <CardHeader>
        <Body as="h5" size="lg_bold" color="tertiary800">
          Flat Card
        </Body>
      </CardHeader>
      <CardBody>

Hoverable

You can apply a fancy hover animation with the hoverable prop and you can use the pressable property to allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior.

Hoverable Card

Some quick example text to build on the card title and content.

Pressable Card

Some quick example text to build on the card title and content.

Hover & Press Card

Some quick example text to build on the card title and content.

//variant hoverable
   <div className="item-three" style="text-align: unset;">
        <Card variant="bordered" hoverable>
          <img src="https://teddys-minio-teddys-dev.vsan-apps.playcourt.id/legion/component/card/apple.png" alt="card variant" />
          <CardBody>
            <Body as="h6" size="lg_bold" color="tertiary800" mb={1} >
              Hoverable Card
            </Body>
            <Body size="sm_regular" color="tertiary500">

Example

Jane Doe

Front-end Engineer | Legion | Jakarta

Phone08234567890

Emailjane.doe@example.com

Heading

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

1 Nov, 11:47AM

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title.

Card titleRead more

Additional notes

No.	Full Name	Age
1	Eric Clapton	77
2	Adam Sandler	56
3	Jennifer Aniston	53
4	Ben Stiller	56
5	Brooklyn Decker	35

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Sources

Some quick example text to build on the card title and make up the bulk of the card's content.

<div className="grid-colum-two">
  // CARD 1
  <div className="item-three">
    <Card variant="bordered">
      <CardHeader style="display: flex; flex-direction: column; align-items: center;">
        <Avatar size="large" src="https://xsgames.co/randomusers/assets/avatars/female/76.jpg" />
        <Heading size="h6" color="tertiary800">
          Jane Doe
        </Heading>

Props

property	propType	required	default	description
background	Color System	-	add background color with color system format
color	Color System	-	add color with color system format
elevation	`elevation0` \| `elevation1` \| `elevation2` \| `elevation3` \| `elevation4` \| `elevation5`	-	Elevation helps to provide separation from the background and can be used to indicate when a card is clickable
variant	`shadow` \| `bordered` \| `flat`	-	`flat`	The card variant style
hoverable	`boolean`	-	`false`	Whether the card can be hovered by the user
pressable	`boolean`	-	`false`	Whether the card should allow users to interact with the card.

Do you have feedback?

Please let us know to make it better

Send Feedback