in namespace DotVVM.Framework.Controls.Bootstrap4

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

Usage & Scenarios

Groups multiple Cards.

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"
             FooterText="Diam sed" />
    <bs:Card HeaderText="Clita diam"
             Text="Might the and and forgot is festal would control hall to sad"
             FooterText="Kasd duo" />


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

HTML produced by the control