CardBody
in namespace DotVVM.Bootstrap5.Controls
Renders a body of a Card component.
Usage & Scenarios
Renders a text content inside the Card control.
Sample 1: Basic CardBody
Use the TitleText, SubtitleText and Text properties to provide two levels of title and a text content for the card.
<bs:Card>
<bs:CardBody TitleText="Main title" SubtitleText="Secondary title" Text="Body of the card" />
</bs:Card>Sample 2: Templated CardBody
If you need to provide a custom content in the card body, place the content inside the control.
Bootstrap recommends the following CSS classes to be used in the card body templates:
h1, ...,h6elements should havecard-titleorcard-subtitleCSS classes.pand other text elements should havecard-textCSS class.aelements should havecard-linkCSS class.
You can set AddAppropriateCardClassesToContent property to true which makes the control to add the CSS classes automatically based on the rules mentioned above.
<bs:Card FooterText="Card Footer">
<bs:CardImage ImageUrl="~/images/LA.jpg" ToolTip="Card Image">
<bs:CardBody style="color:aliceblue;">
<h1>Overlaid body</h1>
<p>
Another text
</p>
<p>Some buttons</p>
<bs:Button Click="{command: DoSomething()}" Text="Button" Type="Danger" />
</bs:CardBody>
</bs:CardImage>
<bs:CardListGroup DataSource="{value: Texts}" TextBinding="{value: _this}" />
</bs:Card>public class ViewModel : DotvvmViewModelBase
{
public string[] Texts { get; } = new[] { "red", "green", "blue" };
public void DoSomething()
{
}
}Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
AddAppropriateCardClassesToContent | Boolean | Gets or sets whether appropriate classes (card-text, card-link, ...) should be added to inner elements. Can be used only when the Content property is used. |
attribute
static value
|
False |
|
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static |
|
Content | List<DotvvmControl> | Gets or sets the content placed inside the control. |
inner element
static value
default
|
null |
|
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates. |
attribute
bindable
|
null |
|
ID | String | Gets or sets the control client ID within its naming container. |
attribute
static value
bindable
|
null |
|
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True |
|
SubtitleText | String | Gets or sets the control subtitle text. H6 tag is used. |
attribute
static value
bindable
|
null |
|
Text | String | Gets or sets the text inside the control. |
attribute
static value
bindable
|
null |
|
TitleText | String | Gets or sets the control title text. H5 tag is used. |
attribute
static value
bindable
|
null |
|
Visible | Boolean | Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control. |
attribute
static value
bindable
|
True |