ComboStrap UI - Card

1 - About

A card contain content and actions about a single subject.

3 - Syntax

<card>
{{topimage}}
<header>Header</header>
=== Title === or <title>Title</title>
Content
</card>

where:

A card:

A blockquote has also a card type

4 - Visual

4.1 - A Full Card (image, title, content, button styled)

<card style="width: 18rem;">
{{teaser_image_1.png?30|}}
<header>That's the header !</header>
=== Teaser Title  ===
A example taken from [[https://getbootstrap.com/docs/4.3/components/card/#example|the bootstrap quick example]] on how to build a card title in order to make up the bulk of the teaser content.
<btn>[[:start|Go to the best plugin on the universe !]]</btn>
</card>

That's the header !

Teaser Title

A example taken from the bootstrap quick example on how to build a card title in order to make up the bulk of the teaser content.

4.2 - Teaser is an alias for card.

At first, teaser was the first name of card and you may still use it.

<teaser style="width: 18rem;">
{{teaser_image_2.jpg?25|}}
=== Teaser Title  ===
A example taken from [[https://getbootstrap.com/docs/4.3/components/card/#example|the bootstrap quick example]] on how to build a card title in order to make up the bulk of the teaser content.
<btn>[[card|Go to this page !]]</btn>
</teaser>

Teaser Title

A example taken from the bootstrap quick example on how to build a card title in order to make up the bulk of the teaser content.

4.3 - A card may include other dokuwiki syntax

Card may include other component. Example with related

<teaser style="width: 18rem;">
=== Backlinks in Card ===
This pages are talking about this subject:
<related/>
</teaser>

4.4 - A card may be styled

Because a card is a HTML superset component, you can style it as you wish.

<card width="300px" background-color="dark" color="white" align="center" >
<header>Header is the top of a component</header>
=== A styled card ===
You can style all [[styling:html|HTML superset component]] easily.
 
A [[styling:align|centered box]] with a dark background [[styling:color|color]] and a white text.
 
<btn light>
[[styling:styling|Check it out !]]
</btn>
 
</card>
Header is the top of a component

A styled card

You can style all HTML superset component easily.

A centered box with a dark background color and a white text.

5 - Documentation / Reference