Card
IzzyBlazor.Card in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly
and its doc comments.
Properties (8)
Titlestring?The heading.
TitleLevelint = 3The heading level of Title, 1 to 6. Defaults to 3.
Descriptionstring?A muted line under the title.
ChildContentRenderFragment?The card's content: the body, plus any CardMedia, CardHeader, CardActions, CardBody and CardFooter.
Hrefstring?Makes the whole card a link to this address, through its title. Needs a Title (it throws without one).
Dividersbool = falseMakes each CardBody a section, with a line across the card between sections, as in a settings page.
VariantCardVariant = CardVariant.OutlineHow it's drawn. Defaults to CardVariant.Outline.
SizeControlSize = ControlSize.MdInner spacing and title size. Defaults to ControlSize.Md.
Events (0)
No events.
Parts (5)
Components written inside Card, documented here with it.
CardMedia
An image or video at the top of a Card, edge to edge. Write it directly in the card.
ChildContentRenderFragment?The part's content.
CardHeader
Custom heading content in a Card, above its Title, such as an avatar row, beside any CardActions. Write it directly in the card.
ChildContentRenderFragment?The part's content.
CardActions
Buttons at the end of a Card's heading row, such as a menu. They stay clickable on a linked card. Write it directly in the card.
ChildContentRenderFragment?The part's content.
CardBody
A Card's body with layout props: a column with Gap, Align, Justify and Direction, like Stack. Optional: content written straight in the card is its body too. Flush runs it edge to edge, for a table or a list.
Layout direction. Defaults to a column.
Flushbool = falseRuns the content to the card's edges, without side padding: for a table, a divided list or a map.
Space between children, in spacing steps (0 to 16).
Cross-axis alignment. Defaults to stretch.
Main-axis distribution. Defaults to start.
Wrapbool = falseWhether children wrap onto new lines: <Row Wrap>.
Inlinebool = falseRenders as inline-flex so the container sits in a line of text.
Asstring = "div"The element to render: div on a Box; components built on it set their own (List a ul, Section a section).
ChildContentRenderFragment?The content.
Plus 25 surface props, 16 item props and 4 common props.
Types (5)
Align
enumCross-axis alignment of a Stack's children.
| Value | Description |
|---|---|
Stretch | Children stretch to fill the cross axis. |
Start | Aligned to the start. |
Center | Centered. |
End | Aligned to the end. |
Baseline | Aligned on their text baselines. |
CardVariant
enumHow a Card is drawn.
| Value | Description |
|---|---|
Outline | A white surface with a border (the default). Works on white and on a tinted page. |
Elevated | A raised surface with a shadow. |
Filled | A quiet fill with no border, for a card inside a white surface (a panel, a dialog, another card). On a tinted page it nearly disappears; use Outline there. |
ControlSize
enumThe height of interactive controls. Shared by buttons and form fields, so a button and an input of the same size line up in a row.
| Value | Description |
|---|---|
Sm | 32px tall, small text. |
Md | 36px tall (the default). |
Lg | 44px tall, large text. For touch-first and marketing pages. |
Direction
enumThe direction a Stack lays out its children.
| Value | Description |
|---|---|
Row | Left to right (in left-to-right languages). |
Column | Top to bottom. |
RowReverse | Right to left. |
ColumnReverse | Bottom to top. |
Justify
enumMain-axis distribution of a Stack's children.
| Value | Description |
|---|---|
Start | Packed at the start. |
Center | Packed in the center. |
End | Packed at the end. |
Between | First and last at the edges, equal space between. |
Around | Equal space around each child. |
Evenly | Equal space between and at the edges. |