LayoutCard
Inhalt der Layout Card
import { LayoutCard } from "@mittwald/flow-react-components"; <LayoutCard>Inhalt der Layout Card</LayoutCard>
Best Practices
- Strukturiere den Content sinnvoll, zum Beispiel mit Section und ColumnLayout.
- Kombiniere die LayoutCard bei Bedarf mit einer AccentBox. So hebst du Inhalte besonders hervor.
Kombiniere mit ...
TabNavigation
Platziere die TabNavigation in einer LayoutCard, um zwischen den Unterseiten zu navigieren. Der Inhalt der aktiven Seite wird darunter in derselben LayoutCard dargestellt.
Properties
| Property | Type | 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 | 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. |