Version: 2.0 |

CardGroup

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders cards as a single, attached element with equal width and height columns.

Properties

Name Type Description Notes Default Value
Items List<Card> Gets or sets a collection of cards rendered inside CardGroup.
attribute
inner element
static value
bindable
default
Type CardGroupType Gets or sets the Type of CardGroup.
attribute
inner element
static value
bindable
default
Group

Events

Name Type Description

Usage & Scenarios

Groups multiple Cards.

https://getbootstrap.com/docs/4.1/components/card/#card-groups

HTML Rendered by the Control

Sample 1: Card Group Types

Use Type property to switch between different layouts of cards.

Possible values are:

  • Group - Cards are rendered right next to each other and have equal size.
  • Deck - Set of equal sized cards that are not attached to each other.
  • Columns - Cards are organized into columns. Cards with different sizes are supported and will form mosaic-like pattern.
<bs:CardGroup Type="Columns">
    <bs:Card HeaderText="Tempor lorem"
             Text="Kasd dolor diam"
             FooterText="Et" />
    <bs:Card HeaderText="No"
             Text="But congealed but wassailers reverie objects by of would known thou bower night from to deadly harold of had a"
             FooterText="Sed id" />
    <bs:Card HeaderText="Labore lorem et"
             Text="Had mirthful resolved"
             FooterText="Amet ipsum takimata gubergren stet illum" />
    <bs:Card HeaderText="Eos vel"
             Text="Bower to there sad below hight virtues weary the on"
             FooterText="Dolores tincidunt" />
    <bs:Card HeaderText="Laoreet sea dolores"
             Text="Sorrow one loved he fathers scarce childe him basked seek say had is hight wasmen ear of things found sooth it maidens for of and"
             FooterText="Lorem odio feugiat" />
    <bs:Card HeaderText="Nonummy nonumy consectetuer lorem"
             Text="Text"
             FooterText="Diam sed" />
    <bs:Card HeaderText="Clita diam"
             Text="Might the and and forgot is festal would control hall to sad"
             FooterText="Kasd duo" />
</bs:CardGroup>

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message