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.
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
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.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
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
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":
Group
Card Slider
Slide 1
This is a wider card with supporting text below as a natural lead-in to additional content.
Slide 2
This card has supporting text below as a natural lead-in to additional content.
Slide 3
This is a wider card with supporting text below as a natural lead-in to additional content.
Slide 4
This card has supporting text below as a natural lead-in to additional content.
Flipper
Flipper 1
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Rückseite 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Flipper 2
This card has supporting text below as a natural lead-in to additional content.
Rückseite 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Flipper 3
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.
Rückseite 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.