ComboStrap UI - Card

1 - About

A card is a box with the dimension of a card that contains summary data such as:

  • a short description
  • an optional image illustration
If the body contains call-to-actions, this is called a teaser

3 - Syntax

<card attribute>
    {{imageTop}}
    <header>Label</header>
    Content
    <btn>[[link|button]]</btn>
</card>

where:

  • attributes may be any styling attributes
    • such as clickable to make the whole card clickable.
  • imageTop if the first element is an image, it will be used as a top illustration image.
  • header defines a label placed at the top of the card

A card:

A blockquote is also logically a card that happens to have an external quote in its body.

4 - Visual

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

<card width="18rem">
{{:teaser_image_1.png|}}
=== 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>

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.

Go to the best plugin on the universe !

4.2 - Teaser is an alias for card.

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

<teaser width="20rem">
{{teaser_image_2.jpg|}}
=== 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 skin="text" spacing="pl-0">[[card|Card link]]</btn>
<btn skin="text">[[#|Another link]]</btn>
</teaser>

The image (ui:teaser_image_2.jpg) does not exist

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.

Card link Another link

4.3 - A card may include other dokuwiki syntax

Card may include other component. Example with related

<teaser 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 componenteasily.

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

Check it out !

4.5 - A card may be clickable

You may extend the clickable surface of a link to the whole card with the clickable attribute.

<card width="18rem" clickable="true">
{{:styling:subway_card_tile.png|}}
=== Clickable Card ===
Lorem ipsum

<btn>[[https://combostrap.com/clickable|A clickable card]]</btn>
</card>

Clickable Card

Lorem ipsum

A clickable card

5 - Documentation / Reference

Powered by ComboStrap