Mikio Plugin Elements

Accordion

<accordion>
<accordion-item title="Item 1">The is some content inside accordion 1</accordion-item>
<accordion-item title="Item 2">Here is some more details</accordion-item>
<accordion-item title="Item 3">and this is the last one!</accordion-item>
</accordion>

Show item

<accordion>
<accordion-item title="Item 1">The is some content inside accordion 1</accordion-item>
<accordion-item title="Item 2" show>Here is some more details</accordion-item>
</accordion>

Text alignment

<accordion>
<accordion-item title="Item 1" text-center>The is some content inside accordion 1</accordion-item>
<accordion-item title="Item 2" text-right show>Here is some more details</accordion-item>
</accordion>

Shadow

<accordion shadow>
<accordion-item title="Item 1">The is some content inside accordion 1</accordion-item>
<accordion-item title="Item 2" show>Here is some more details</accordion-item>
</accordion>

Types

<accordion shadow>
<accordion-item title="Item 1" primary>The is some content inside accordion 1</accordion-item>
<accordion-item title="Item 2" danger>Here is some more details</accordion-item>
</accordion>

Alerts

<alert>A simple primary alert - check it out!</alert>
<alert secondary>A simple secondary alert - check it out!</alert>
<alert success>A simple success alert - check it out!</alert>
<alert danger>A simple danger alert - check it out!</alert>
<alert warning>A simple warning alert - check it out!</alert>
<alert info>A simple info alert - check it out!</alert>
<alert light>A simple light alert - check it out!</alert>
<alert dark>A simple dark alert - check it out!</alert>

Links are colour matched

example link example link example link example link

<alert>A simple primary alert with an [[wiki:syntax|example link]]. Give it a click if you like.</alert>
<alert secondary>A simple secondary alert with an [[start|example link]]. Give it a click if you like.</alert>
<alert success>A simple success alert with an [[http://apple.com/|example link]]. Give it a click if you like.</alert>
<alert danger>A simple danger alert with an [[start|example link]]. Give it a click if you like.</alert>

Additional content

<alert>
<heading>Well done!</heading>
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
<hr>
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</alert>

Welcome back!

<alert secondary>**Welcome back!**\\
This is a special notification.</alert>

New Site Features

You can now have cover images on blog pages

Drafts will now auto-save while writing

<alert success>**New Site Features**\\
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
</alert>

Width and Shadow

<alert danger width=20em shadow><mikio-icon fa exclamation-triangle>This is a danger alert with a set width and shadow</alert>

Icons

<alert danger width=20em shadow icon="fa exclamation-triangle">This is a danger alert with a set width and shadow</alert>

Text alignment

<alert success text-center>This is a success alert with text centered</alert>
<alert warning text-right>This is a warning alert with text right justified</alert>

Alert alignment

<alert dark align-left width=20em>This is a dark alert aligned left</alert>
<alert dark align-center width=20em>This is a dark alert aligned center</alert>
<alert dark align-right width=20em>This is a dark alert aligned right</alert>

Dismissible

<alert info dismissible>This is a dismissible alert. Press the close button to hide it</alert>

<alert danger width=20em shadow dismissible icon="fa exclamation-triangle">This is a danger alert with a set width and shadow</alert>

Anchor

Allows the linking to page locations

<button url="#my_anchor">Go to my_anchor</button>

Badge

<heading>Example heading <badge>New</badge></heading>
<heading 2>Example heading <badge>New</badge></heading>
<heading 3>Example heading <badge>New</badge></heading>
<heading 4>Example heading <badge>New</badge></heading>
<heading 5>Example heading <badge>New</badge></heading>
<heading 6>Example heading <badge>New</badge></heading>

<button large>Notifications <badge light>4</badge></button>

<badge primary>Primary</badge>
<badge secondary>Secondary</badge>
<badge success>Success</badge>
<badge danger>Danger</badge>
<badge warning>Warning</badge>
<badge info>Info</badge>
<badge light>Light</badge>
<badge dark>Dark</badge>

<badge pill primary>Primary</badge>
<badge pill secondary>Secondary</badge>
<badge pill success>Success</badge>
<badge pill danger>Danger</badge>
<badge pill warning>Warning</badge>
<badge pill info>Info</badge>
<badge pill light>Light</badge>
<badge dark>Dark</badge>

<badge primary url="http://github.com/">Primary</badge>
<badge secondary url="http://github.com/">Secondary</badge>
<badge success url="http://github.com/">Success</badge>
<badge danger url="http://github.com/">Danger</badge>
<badge warning url="http://github.com/">Warning</badge>
<badge info url="http://github.com/">Info</badge>
<badge light url="http://github.com/">Light</badge>
<badge dark url="http://github.com/">Dark</badge>

<badge primary shadow>Primary</badge>
<badge primary width=10em>Primary</badge>
<badge primary width=10em text-right>Primary</badge>
<badge primary width=10em text-left>Primary</badge>

Blockquote

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</blockquote>
<blockquote footer="Someone famous in the Source Title again">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</blockquote>
<blockquote footer="Someone famous in the Source Title again" cite="Source Title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</blockquote>

Text alignment

<blockquote text-center footer="Someone famous in the Source Title again" cite="Source Title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</blockquote>
<blockquote text-right footer="Someone famous in the Source Title again" cite="Source Title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</blockquote>

Boxes

Used to enclose content

<box>This is some text</box>
<box>{{:badgeduino_002b.jpg?nolink|}}</box>