Card

Use this as the main wrapper for your cards.

Lorem ipsum dolor

This is a card.

frame

radius

size

compact

contrast

color

variant

--- 
import { Card } from 'fulldev-ui'
---

<Card
  frame="panel"
  radius="auto"
  size="md"
  compact={true}
  contrast={false}
  color="base"
  variant="subtle"
/>

Props

Prop	Type	Default
structure	column \| split \| row	-
frame	fill \| panel	panel
radius	none \| auto	auto
size	sm \| md \| lg	-
compact	attribute	true
contrast	attribute	-
color	base \| brand	-
variant	ghost \| subtle \| surface \| outline \| soft \| solid	subtle
theme	string	-
text	string	-
html	string	-
as	HTMLTag	a
HTML Attributes	Polymorphic<as>	-

Examples

`frame`

Applies a margin around certain child elements and applies the background and border set in your color variables

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import { Card, Heading, Paragraph } from 'fulldev-ui'
---

<Card frame="panel" size="sm">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

<Card frame="fill" size="sm">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

`panel`

Has both outer margins and inner paddings.

`size`

The size prop cascades: it is inherited from the parent and it is applied to all children.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import { Card, Heading, Paragraph } from 'fulldev-ui'
---

<Card frame="panel" size="sm">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

<Card frame="panel" size="md">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

<Card frame="panel" size="lg">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

`variant`

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import { Card, Heading, Paragraph } from 'fulldev-ui'
---

<Card variant="subtle">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

<Card variant="ghost">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

<Card variant="outline">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

<Card variant="soft">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

<Card variant="surface">
  <Heading> Lorem ipsum dolor </Heading>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Paragraph>
</Card>

`structure`

Applies all styles & props of the chosen Structure component to this component.

`split`

Equal columns above a certain breakpoint, based on CSS grid.

On small screens it behaves the same as column.

`spread`

Structures children in a row with space between them and wrapping.

`row`

Structures children in a horizontal row.

../../../../../ui/src