# LayoutCard

Eine LayoutCard ist ein einfacher Container, der mit beliebigem Inhalt gefüllt werden kann.

```tsx
import { LayoutCard } from "@mittwald/flow-react-components";

<LayoutCard>Inhalt der Layout Card</LayoutCard>
```

---

# Best Practices

- Strukturiere den Content sinnvoll, zum Beispiel mit
  [Section](https://flow.mittwald.de/04-components/structure/section) und
  [ColumnLayout](https://flow.mittwald.de/04-components/structure/column-layout).
- Kombiniere die LayoutCard bei Bedarf mit einer
  [AccentBox](https://flow.mittwald.de/04-components/structure/accent-box). So hebst du Inhalte
  besonders hervor.

---

# Kombiniere mit ...

## TabNavigation

Platziere die [TabNavigation](https://flow.mittwald.de/04-components/navigation/tab-navigation) in einer
LayoutCard, um zwischen den Unterseiten zu navigieren. Der Inhalt der aktiven
Seite wird darunter in derselben LayoutCard dargestellt.

```tsx
import {
  LayoutCard,
  TabNavigation,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<LayoutCard>
  <TabNavigation aria-label="Projekt-Navigation">
    <Link href="#" aria-current="page">
      Apps
    </Link>
    <Link href="#">Container</Link>
    <Link href="#">Domains</Link>
    <Link href="#">E-Mails</Link>
    <Link href="#">Backups</Link>
  </TabNavigation>
  <Section>
    <Text>
      Der Inhalt der aktiven Seite wird unterhalb der
      TabNavigation in derselben LayoutCard dargestellt.
    </Text>
  </Section>
</LayoutCard>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `elementType` | `"div" \| "main" \| ExoticComponent<{}> \| "footer" \| "header"` | - | The HTML element or React component rendered as the elements root. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |