====== Card ======
[[doku>plugin:mikioplugin|Mikio Plugin]]

https://github.com/nomadjimbob/mikioplugin/wiki/Card

Creates a card element
<card placeholder-text="Image cap" title="Card title" width=18em>
Some quick example text to build on the card title and make up the bulk of the card's content.

<button>Go somewhere</button>
</card>
<code ->
<card placeholder-text="Image cap" title="Card title" width=18em>
Some quick example text to build on the card title and make up the bulk of the card's content.

<button>Go somewhere</button>
</card>
</code>
<card header="Featured" footer="2 days ago" title="Special title treatment" text-center>
With supporting text below as a natural lead-in to additional content.

<button>Go somewhere</button>
</card>
<code ->
<card header="Featured" footer="2 days ago" title="Special title treatment" text-center>
With supporting text below as a natural lead-in to additional content.

<button>Go somewhere</button>
</card>
</code>

===== Horizontal =====
<card placeholder-text="Card image" title="Card title" footer="Last updated 3 mins ago" horizontal>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</card>
<code ->
<card placeholder-text="Card image" title="Card title" footer="Last updated 3 mins ago" horizontal>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</card>
</code>

===== Attributes =====

**title**: Inserts a title element into the cards body\\ **subtitle**: Inserts a subtitle element into the cards body\\ **no-body**: Removes any padding in the card body\\ \\ **horizontal**: Displays the card horizontally\\ \\ **image**: Displays an image at the top of the card (contained within the object)\\ **image-cover**: True or false to use the image to cover the space instead of contain the entire image\\ **footer-image**: Displays an image at the bottom of the card\\ \\ **placeholder-text**: Displays a placeholder with the text at the top of the card\\ **footer-placeholder-text**: Displays a placeholder with the text at the bottom of the card\\ \\ **overlay**: Displays either the%% %%''image''%% %%or%% %%''placeholder-text''%% %%underneath the card%% %%\\ **header**: Displays a card header with text\\ **footer**: Displays a card footer with text\\ **footer-small**: Displays a card footer with small text

====== Individual Elements ======

Card elements also support seperate elements instead of using attribute values for advanced designs:
<card width=18em no-body>
<card-header>Fancy header</card-header>
<card-body>
<card-title>Special title treatment</card-title>
With supporting text below as a natural lead-in to additional content.

<button>Go somewhere</button>
</card-body>
<card-footer>Footer text</card-footer>
</card>
<code ->
<card width=18em no-body>
<card-header>Fancy header</card-header>
<card-body>
<card-title>Special title treatment</card-title>
With supporting text below as a natural lead-in to additional content.

<button>Go somewhere</button>
</card-body>
<card-footer>Footer text</card-footer>
</card>

</code>

==== Listgroup Card ====

An example of a card using a listgroup in the body. As the cards body has its own padding, the%% %%''flush''%% %%attribute is used on the listgroup to remove its own margins.

<card width=18em no-body>
<card-header>Fancy header</card-header>
<card-body>
<card-title>Special title treatment</card-title>
This is my list group
</card-body>
<listgroup flush>
<listgroup-item>Item 1</listgroup-item>
<listgroup-item>Item 2</listgroup-item>
<listgroup-item>Item 3</listgroup-item>
</listgroup>
<card-footer>Footer text</card-footer>
</card>
<code ->
<card width=18em no-body>
<card-header>Fancy header</card-header>
<card-body>
<card-title>Special title treatment</card-title>
This is my list group
</card-body>
<listgroup flush>
<listgroup-item>Item 1</listgroup-item>
<listgroup-item>Item 2</listgroup-item>
<listgroup-item>Item 3</listgroup-item>
</listgroup>
<card-footer>Footer text</card-footer>
</card>

</code>

==== Buttons ====

All elements inside a card receive a width of 100% as part of the CSS flexbox styling. This means that items such as buttons will be treated as block elements and you will be required to explicitly set their%% %%width%% %%and%% %%alignment.
<card header="Featured" footer="2 days ago" title="Special title treatment" text-center>
With supporting text below as a natural lead-in to additional content.

<button align-enter width=10rem>Go somewhere</button>
</card>
<code ->
<card header="Featured" footer="2 days ago" title="Special title treatment" text-center>
With supporting text below as a natural lead-in to additional content.

<button align-enter width=10rem>Go somewhere</button>
</card>

</code>

==== Multiple Buttons ====

Even setting the width of an object as above, the element will still block the entire row and force siblings onto the next line as per the image below:

<card header="Featured" footer="2 days ago" title="Special title treatment" text-center>
With supporting text below as a natural lead-in to additional content.
<button align-right width=10rem>Go somewhere</button>
<button align-left width=10rem>Go somewhere</button>
</card>

This can be overcome using%% %%columns and rows%% %%such as:
<card header="Featured" footer="2 days ago" title="Special title treatment" text-center>
With supporting text below as a natural lead-in to additional content.

<row>
<button align-right width=10rem>Go somewhere</button>
<button align-left width=10rem>Go somewhere</button>
</row>
</card>
<code ->
<card header="Featured" footer="2 days ago" title="Special title treatment" text-center>
With supporting text below as a natural lead-in to additional content.

<row>
<button align-right width=10rem>Go somewhere</button>
<button align-left width=10rem>Go somewhere</button>
</row>
</card>
</code>