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.

IMG_0338

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

IMG_0362
Description right

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

IMG_0339

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.

Featured

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

Featured

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

IMG_0233

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

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 body.

Header

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.

IMG_1097

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-1034

Text Bottom

Text Top

Es wird min. ein Image für die Front erwartet.

Ein zweites Image für die Rückseite ist optional.

"Extra Class - img-tag" wie hier "rounded-circle" wird berücksichtigt.

 

image-1036
image-1037

Das zweite ist das kleine, kreisrunde Card Image. Das Image kann in der Größe angepasst werden.

image-1224
image-1225

Fisherman

image-1230
image-1231

Designer

image-1228
image-1229

Engineer

Infos:

https://getbootstrap.com/docs/5.3/components/card/