Import Artifact, ArtifactStatus from @prepared911/ui/artifact.
title | LocalizedMessage | DisplayValue | required | A heading |
description | LocalizedMessage | DisplayValue | | Under the title |
children | ReactNode | | Body, between the header and the status |
status | ReactNode | | Footer slot at the inline end, usually ArtifactStatus |
headingLevel | CardHeadingLevel | H3 | |
size | CardSize | Default | |
className | string | | |
ref | Ref<HTMLDivElement> | | The card |
label | LocalizedMessage | required | Such as "Built" |
icon | Glyph | check | Decorative |
className | string | | |
ref | Ref<HTMLSpanElement> | | |
data-* attributes pass to the status. Reserved design-system state names are dropped with a warning.
Artifact, ArtifactStatus, and the types ArtifactProps and ArtifactStatusProps.
title | LocalizedMessage | DisplayValue | — | Heading copy of the card. |
children | ReactNode | — | Body content between the header and the status. |
className | string | — | @deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern. |
description | LocalizedMessage | DisplayValue | — | Supporting text under the title. |
headingLevel | CardHeadingLevel | CardHeadingLevel.H3 | Heading element of the title. The visual role is fixed, so the rank follows the page outline. |
ref | Ref<HTMLDivElement> | — | Ref to the card element. |
size | CardSize | CardSize.Default | Interior padding. |
status | ReactNode | — | Trailing status slot, usually an {@link ArtifactStatus }. It sits at the inline end of the footer. |
Interactive examples and edge cases for this component are in Storybook.