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.
Item props (from LayoutItemBase)
Margin on all sides, in spacing steps (-16 to 16; one step = 4px).
Width.
Minimum width.
Maximum width.
Growbool = falseWhether to grow into free space inside a Stack, Row or Column: <Box Grow>.
Shrinkbool = trueWhether to shrink when space is short inside a Stack, Row or Column. Defaults to true; Shrink="false" keeps the size.
Starting size inside a Stack, before growing or shrinking.
Alignment across the parent's direction, overriding the parent's Align for this component only, such as a button lined up with the bottom of labeled fields in a Row.
Surface props (from StyledComponentBase)
ColorSchemeColorScheme = ColorScheme.AutoPadding on all sides, in spacing steps (0 to 16; one step = 4px).
Background color.
Text color. When not set and Bg is a theme color, the matching contrast color is used automatically (Bg="Color.Primary" gets Color.OnPrimary text).
Corner radius.
Elevation.
Minimum height.
Height.
Maximum height; pair it with Overflow to scroll what doesn't fit.
What happens to content that doesn't fit: Overflow.Auto to scroll it.
A border on every side, in whole pixels (0 to 16), in BorderColor (the border token by default) and BorderStyle (solid by default). Like padding: BorderX and BorderY override an axis, the single sides override that. Sides you don't set keep the component's own border.
Borders at the top and bottom, such as a band with lines above and below. Replaces Border on this axis.
The border color, for borders set here or the component's own. Defaults to Border.
How borders set here are drawn (BorderStyle.Dashed, BorderStyle.Dotted), and the own border of a Card or a bordered EmptyState. Solid by default (dashed on an EmptyState).
Common props (from IzzyComponentBase)
Classstring?Extra CSS classes, merged after the component's own classes.
Stylestring?Inline style, appended after the component's generated custom properties.
VisibleFromBreakpoint?Shows the component only from this breakpoint up, such as header links for wide screens.
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. |