Mikio Plugin Elements
Accordion
Item 1
The is some content inside accordion 1
Item 2
Here is some more details
Item 3
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
<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
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
<button url="#my_anchor">Go to my_anchor</button>
Badge
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
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>
<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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<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>
