CardGroup

in namespace DotVVM.Framework.Controls.Bootstrap4

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

Usage & Scenarios

Groups multiple Cards.

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

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>

Properties

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

HTML produced by the control