Card

import { Card } from "anolis-ui";

interface CardProps extends SystemProps {
  _header?: PseudoProp;
  header?: Renderable;

  _title?: PseudoProp;
  title?: Renderable;

  _tag?: PseudoProp;
  tag?: Renderable;

  _media?: PseudoProp;
  media?: Renderable;

  _body?: PseudoProp;
  body?: Renderable;

  _footer?: PseudoProp;
  footer?: Renderable;
}

type CardVariant = "elevated" | "outline";
type CardSize = never;

Card title

I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.

Nice footer bro

<Card
  footer="Nice footer bro"
  media={<Img src="//placehold.it/416x180" />}
>
  <x.h4>
    Card title
  </x.h4>
  <x.p mt="0.75rem">
    I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil
    existence, that I neglect my talents.
  </x.p>
</Card>

Outlined

Outline variant of the card is without shadow, but with border instead.

Card title

I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.

<Card
  v="outlined"
  title="Card title"
  footer={<Button>Click me</Button>}
>
  <x.p>
    I should be incapable of drawing a single stroke at the present moment; and yet I feel
    that I never was a greater artist than now.
  </x.p>
</Card>

Custom

With custom shadow, border-radius, without image etc.

📦

Ready out of the box

Just install and use, Anolis is easy to setup and comes with variety of ready-to-use components.

<Card borderRadius="9" _body={{ padding: "2rem" }}>
  <x.p fontSize="4rem" lineHeight="4rem">
    📦
  </x.p>
  <x.h3 mt="1.5rem">
    Ready out of the box
  </x.h3>
  <x.p mt="1rem">
    Just install and use, Anolis is easy to setup and comes with variety of
    ready-to-use components.
  </x.p>
</Card>

Sandbox

Title

test

Lorem ipsum dolor sit amet

Card footer

<Card
  title="Title"
  tag="test"
  footer="Card footer"
>
  Lorem ipsum dolor sit amet
</Card>

Title

test

Lorem ipsum dolor sit amet

Card footer

<Card
  title="Title"
  tag="test"
  footer="Card footer"
>
  Lorem ipsum dolor sit amet
</Card>