The card component comprises several elements that you can mix and match:
+-
+
-
+
card: the main container +-
+
-
+
card-header: a horizontal bar with a shadow +-
+
-
+
card-header-title: a left-aligned bold text +
+ -
+
card-header-icon: a placeholder for an icon +
+
+ -
+
-
+
card-image: a fullwidth container for a reponsive image +
+ -
+
card-content: a multi-purpose container for any other element +
+ -
+
card-footer: a horizontal list of controls +-
+
-
+
card-footer-item: a repeatable list item +
+
+ -
+
+ -
+