Mikio Plugin Elements

Accordion

The is some content inside accordion 1

Here is some more details

and this is the last one!

 
<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

Item 1

The is some content inside accordion 1

Item 2

Here is some more details

<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

Item 1

The is some content inside accordion 1

Item 2

Here is some more details

<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

Item 1

The is some content inside accordion 1

Item 2

Here is some more details

<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

Item 1

The is some content inside accordion 1

Item 2

Here is some more details

<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

A simple primary alert - check it out!

A simple secondary alert - check it out!

A simple success alert - check it out!

A simple danger alert - check it out!

A simple warning alert - check it out!

A simple info alert - check it out!

A simple light alert - check it out!

A simple dark alert - check it out!

  
<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

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

<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

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<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! This is a special notification.

<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

This is a danger alert with a set 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

This is a danger alert with a set width and shadow

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

Text alignment

This is a success alert with text centered

This is a warning alert with text right justified

<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

This is a dark alert aligned left

This is a dark alert aligned center

This is a dark alert aligned right

<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

×This is a dismissible alert. Press the close button to hide it

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

×This is a danger alert with a set width and shadow

<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

Go to my_anchor

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

Badge

Example heading New

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

Notifications 4

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

Primary Secondary Success Danger Warning Info Light Dark

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

Primary Secondary Success Danger Warning Info Light Dark

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

Primary Secondary Success Danger Warning Info Light Dark

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

Primary Primary Primary Primary

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in the Source Title again

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in the Source Title again

<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

This is some text

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