Cards

Bootstrap-Cards bieten einen flexiblen und erweiterbaren Content-Container mit mehreren Varianten und Optionen.

Es enthält Optionen für Kopf- und Fußzeilen, eine Vielzahl von Inhalten, kontextbezogene Hintergrundfarben und leistungsstarke Anzeigeoptionen.

Cards ersetzt die alten Panels, Wells und Thumbnails aus Bootstrap 3. Ähnliche Funktionalitäten zu diesen Komponenten sind als Modifikationsklassen für Cards verfügbar.

image-106

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link
image-107

Some quick example text to build on the card title and make up the bulk of the card's content.

image-108

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Hier einige Beispiele, die ich mit dem Inhaltselement "BS Card" umgesetzt habe.

Unter "Content" kann der Header, Bodytext, Listengruppen, Bodytext und der Footer eingegeben werden. Das Bild wird unter "Medien" geladen und die Einstellungen können unter "Erscheinungsbild" angepasst werden.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
image-109

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

This is some text within a card block.

Card Layout

Mit dem neuen Gridelement "Card wrapper" können verschiedene Layouts umgesetzt werden.

Hier ein Beispiel mit dem Card Layout "Group":

image-110

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

image-111

Card title

This card has supporting text below as a natural lead-in to additional content.

image-112

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.