LayoutCard
Inhalt der Layout Card
<LayoutCard>Inhalt der Layout Card</LayoutCard>
Best Practices
- Strukturiere den Content sinnvoll, zum Beispiel mit Section und ColumnLayout.
- Platziere einen seitenweiten Alert in der LayoutCard vor der ersten Section.
- 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.
Alert
Gilt ein Alert für die gesamte Seite, platziere ihn in der LayoutCard vor der ersten Section – nicht oberhalb der LayoutCard. Enthält die LayoutCard eine TabNavigation, steht der Alert unterhalb der Tabs. Verteilt sich die Seite auf mehrere LayoutCards, gehört der Alert in die LayoutCard, deren Inhalt er betrifft.
E-Mail-Adresse
...Speicherplatz
...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. `null` takes a wrapper a surrounding props context set back off, the way `tunnel: null` does for a tunnel. |
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. |