
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Blazorise cards provide a flexible and extensible content container with multiple variants and options.
The <Card>
component is a versatile component that can be used for anything from a panel to a static image. The card component has numerous helper components to make markup as easy as possible.
<Card>
<CardHeader>
<CardImage>
<CardBody>
<CardTitle>
<CardSubtitle>
<CardText>
<CardFooter>
<CardGroup>
<CardDeck>
<Card Margin="Margin.Is4.OnY"> <CardImage Source="img/gallery/7.jpg" Alt="Placeholder image"> </CardImage> <CardBody> <CardTitle Size="5">Card title</CardTitle> <CardText> Some quick example text to build on the card title and make up the bulk of the card's content. </CardText> <Button Color="Color.Primary">Button</Button> </CardBody> </Card>
<CardDeck> <Card> <CardImage Source="/img/gallery/2.jpg" Alt="Card image cap 3"></CardImage> <CardBody> <CardTitle Size="5">Card title 1</CardTitle> <CardText> This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </CardText> <Button Color="Color.Primary">Button</Button> </CardBody> </Card> <Card> <CardImage Source="/img/gallery/3.jpg" Alt="Card image cap 9"></CardImage> <CardBody> <CardTitle Size="5">Card title 2</CardTitle> <CardText> This card has supporting text below as a natural lead-in to additional content. </CardText> <Button Color="Color.Primary">Button</Button> </CardBody> </Card> <Card> <CardImage Source="/img/gallery/4.jpg" Alt="Card image cap 12"></CardImage> <CardBody> <CardTitle Size="5">Card title 3</CardTitle> <CardText> This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. </CardText> <Button Color="Color.Primary">Button</Button> </CardBody> </Card> </CardDeck>
Name | Description | Type | Default |
---|---|---|---|
Background |
Sets the bar background color. | Background |
Default |
WhiteText |
Sets the white text when using the darker background. | bool |
false |
Name | Description | Type | Default |
---|---|---|---|
Italic |
Italicize text if set to true. | bool |
false |
TextAlignment |
Sets the text alignment. | TextAlignment |
Default |
TextColor |
Sets the text color. | TextColor |
Default |
TextOverflow |
Determines how the text will behave when it is larger than a parent container. | TextOverflow |
Default |
TextTransform |
Sets the text transformation. | TextTransform |
Default |
TextWeight |
Sets the text weight. | TextWeight |
Default |
Name | Description | Type | Default |
---|---|---|---|
Italic |
Italicize text if set to true. | bool |
false |
Size |
Number from 1 to 6 that defines the title size where the smaller number means larger text. | int? |
null |
TextAlignment |
Sets the text alignment. | TextAlignment |
Default |
TextColor |
Sets the text color. | TextColor |
Default |
TextOverflow |
Determines how the text will behave when it is larger than a parent container. | TextOverflow |
Default |
TextTransform |
Sets the text transformation. | TextTransform |
Default |
TextWeight |
Sets the text weight. | TextWeight |
Default |
Name | Description | Type | Default |
---|---|---|---|
Italic |
Italicize text if set to true. | bool |
false |
Size |
Number from 1 to 6 that defines the subtitle size where the smaller number means larger text. | int |
6 |
TextAlignment |
Sets the text alignment. | TextAlignment |
Default |
TextColor |
Sets the text color. | TextColor |
Default |
TextOverflow |
Determines how the text will behave when it is larger than a parent container. | TextOverflow |
Default |
TextTransform |
Sets the text transformation. | TextTransform |
Default |
TextWeight |
Sets the text weight. | TextWeight |
Default |
Name | Description | Type | Default |
---|---|---|---|
Alt |
Alternative link text. | string |
null |
Source |
Link URL. | string |
null |
Name | Description | Type | Default |
---|---|---|---|
Alt |
Alternative image text. | string |
null |
Source |
Image URL. | string |
null |