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

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

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

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

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

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

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

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

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

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

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

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

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

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

Allows the linking to page locations

Go to my_anchor

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

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>

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>

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>

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>

Used to enclose content

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

This is some text

This is some text

<row>
<col><box width=5em border-color=grey>This is some text</box></col>
<col><box width=10em height=10em border-color=pink>This is some text</box></col>
<col><box width=5em>{{:badgeduino_002b.jpg?nolink|}}</box></col>
</row>

This is some text

<row>
<col><box width=10em shadow>This is some text</box></col>
<col><box width=10em shadow>{{:badgeduino_002b.jpg?nolink|}}</box></col>
</row>

border=size or border=“top left bottom right”

<row>
<col><box width=10em text-center border-color=#ffff00>This is some text</box></col>
<col><box width=10em text-center border-color=green border-width=10px>This is some text</box></col>
<col><box width=10em text-center border-color=green border-width="10px 0 10px 0">This is some text</box></col>
<col><box width=10em text-center border-color=rgba(0,0,0,.5) border-width=4px>This is some text</box></col>
</row>

<row>
<col><box width=10em text-center border-color=#ff0000>This is some text</box></col>
<col><box width=10em text-right border-color=#ff0000>This is some text</box></col>
</row>

<row>
<col><box width=10em round=.25em>{{:badgeduino_002b.jpg?nolink|}}</box></col>
<col><box width=10em round=.5em>{{:badgeduino_002b.jpg?nolink|}}</box></col>
<col><box width=10em round=40px>{{:badgeduino_002b.jpg?nolink|}}</box></col>
<col><box width=10em round=100%>{{:badgeduino_002b.jpg?nolink|}}</box></col>
</row>

<box width=10em primary>Primary box</box>
<box width=10em secondary>Secondary box</box>
<box width=10em success>Success box</box>
<box width=10em warning>Warning box</box>
<box width=10em danger>Danger box</box>
<box width=10em info>Info box</box>
<box width=10em light>Light box</box>
<box width=10em dark>Dark box</box>

<box width=10em height=10em border-color=black reveal reveal-text="Show me">Secret text</box>

<box width=10em height=10em border-color=black vertical-align=middle>My text</box>

This is some text
with forced inline break
some some elements require for new lines

This is some text<br>with forced inline break<br>some some elements require for new lines

Primary Secondary Success Danger Warning Info Light Dark Link

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

Primary Secondary Success Danger Warning Info Light Dark

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

Large button Large button

<button large primary>Large button</button>
<button large secondary>Large button</button>

Small button Small button

<button small primary>Small button</button>
<button small secondary>Small button</button>

Block level button Block level button

<button block primary>Block level button</button>
<button block secondary>Block level button</button>

Primary link Link Open in New Tab

<button primary url="https://github.com/">Primary link</button>
<button secondary url="https://github.com/">Link</button>
<button success newtab url="https://github.com/">Open in New Tab</button>

Primary link Link

<button active primary url="https://github.com/">Primary link</button>
<button active secondary url="https://github.com/">Link</button>

Primary link Link

<button disabled primary url="https://github.com/">Primary link</button>
<button disabled secondary url="https://github.com/">Link</button>

Primary link Link

<button primary width=20em url="https://github.com/">Primary link</button>
<button secondary width=20em url="https://github.com/">Link</button>

Primary link Link

<button primary width=20em text-left url="https://github.com/">Primary link</button>
<button secondary width=20em text-right url="https://github.com/">Link</button>

Primary link Link

<button primary block width=20em align-center url="https://github.com/">Primary link</button>
<button secondary block width=20em align-right url="https://github.com/">Link</button>

Primary link Link

<button primary shadow url="https://github.com/">Primary link</button>
<button secondary shadow url="https://github.com/">Link</button>

<button-group>
<button>A button</button>
<button secondary>A button</button>
<button success>A button</button>
</button-group>

<button-group small>
<button>A button</button>
<button secondary>A button</button>
<button success>A button</button>
</button-group>

<button-group large>
<button>A button</button>
<button secondary>A button</button>
<button success>A button</button>
</button-group>

<button-group vertical>
<button>A button</button>
<button secondary>A button</button>
<button success>A button</button>
</button-group>

<button-group align-center>
<button>A button</button>
<button secondary>A button</button>
<button success>A button</button>
</button-group>

<button-group align-center shadow>
<button>A button</button>
<button secondary>A button</button>
<button success>A button</button>
</button-group>

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

<card>This is some text within a card body</card>

<card title="Card title" subtitle="Card subtitle" width=18em>
Some quick example text to build on the card title and make up the bulk of the card's content.
[[:start|Card link]] [[:start|Another link]]
</card>

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

Some quick example text to build on the card title and make up the bulk of the card's content.

<card image="{{:badgeduino_002b.jpg?nolink|}}" width=18em>
Some quick example text to build on the card title and make up the bulk of the card's content.
</card>

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

Some quick example text to build on the card title and make up the bulk of the card's content.

<card footer-image="{{:badgeduino_002b.jpg?nolink|}}" width=18em>
Some quick example text to build on the card title and make up the bulk of the card's content.
</card>

<card header="Featured" title="Special title treatment">
With supporting text below as a natural lead-in to additional content.

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

<card header="Featured" title="Special title treatment">
<blockquote footer="Someone famous in Source Title" cite="Source Title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</blockquote>
</card>

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

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

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

<card placeholder-text="Card image" title="Card title" footer="Last updated 3 mins ago" overlay>
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>

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<card image="{{:badgeduino_002b.jpg?nolink|}}" title="Card title" footer="Last updated 3 mins ago" overlay>
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>

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

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<card image="{{:badgeduino_002b.jpg?nolink|}}" 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>

<card title="Special title treatment" width=18em  text-center>
With supporting text below as a natural lead-in to additional content.

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

<card title="Special title treatment" width=18em text-right>
With supporting text below as a natural lead-in to additional content.

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

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

Slide 1 title

this is some text

SLIDE 3

the text

<carousel>
<carousel-item image="{{:badgeduino_002b.jpg?nolink|}}" title="SLIDE 1" text="the text" url="http://apple.com" background-color="red">
<carousel-item placeholder-text="PLACEHOLDER" title="SLIDE 3" text="the text" url="http://slq.qld.gov.au" background-color="rgba(0,0,0,0.75)">
</carousel>

SLIDE 1

the text

SLIDE 3

the text

<carousel slide>
<carousel-item image="{{:badgeduino_002b.jpg?nolink|}}" title="SLIDE 1" text="the text" url="http://apple.com" background-color="red">
<carousel-item placeholder-text="PLACEHOLDER" title="SLIDE 3" text="the text" url="http://slq.qld.gov.au" background-color="rgba(0,0,0,0.75)">
</carousel>

SLIDE 1

the text

SLIDE 3

the text

<carousel fade>
<carousel-item image="{{:badgeduino_002b.jpg?nolink|}}" title="SLIDE 1" text="the text" url="http://apple.com" background-colour="red">
<carousel-item placeholder-text="PLACEHOLDER" title="SLIDE 3" text="the text" url="http://slq.qld.gov.au" background-colour="rgba(0,0,0,0.75)">
</carousel>

SLIDE 1

the text

SLIDE 3

the text

<carousel slide start>
<carousel-item image="{{:badgeduino_002b.jpg?nolink|}}" title="SLIDE 1" text="the text" url="http://apple.com" background-colour="red">
<carousel-item placeholder-text="PLACEHOLDER" title="SLIDE 3" text="the text" url="http://slq.qld.gov.au" background-colour="rgba(0,0,0,0.75)">
</carousel>

SLIDE 1

the text

SLIDE 3

the text

<carousel slide start>
<carousel-item delay=5 image="{{:badgeduino_002b.jpg?nolink|}}" title="SLIDE 1" text="the text" url="http://apple.com" background-colour="red">
<carousel-item delay=10 placeholder-text="PLACEHOLDER" title="SLIDE 3" text="the text" url="http://slq.qld.gov.au" background-colour="rgba(0,0,0,0.75)">
</carousel>

SLIDE 1

the text

SLIDE 3

the text

<carousel slide start>
<carousel-item delay=5 image="{{:badgeduino_002b.jpg?nolink|}}" title="SLIDE 1" text="the text" url="http://apple.com" background-colour="red">
<carousel-item delay=10 placeholder-text="PLACEHOLDER" title="SLIDE 3" text="the text" url="http://slq.qld.gov.au" background-colour="rgba(0,0,0,0.75)">
</carousel>

Click me to toggle the view

<button collapse-id="the_item">Click me to toggle the view</button>
<collapse id="the_item">This is the hidden item!</collapse>

Columns inside rows are split up evenly between each other

<row>
<col><card primary>1 mikio-column</card></col>
</row>

<row>
<col><card primary>1 mikio-column</card></col>
<col><card secondary>2 mikio-column</card></col>
</row>

<row>
<col><card primary>1 mikio-column</card></col>
<col><card secondary>2 mikio-column</card></col>
<col><card success>3 mikio-column</card></col>
<col><card dark>4 mikio-column</card></col>
</row>

You can also combine rows and columns. Each row has 12 columns, by setting the column number, you can set the width of a column

<row>
<col 3><card primary>1 mikio-column</card></col>
<col 6><card secondary>2 mikio-column</card></col>
<col 3><card success>3 mikio-column</card></col>
</row>

This will break mobile views in certain conditions. For advanced designs, use grid

<row>
<col 8><card primary height=100%>Big card</card></col>
<col 4>
<row><card secondary width=100% xheight=50%>Small card</card></row>
<row><card danger width=100% xheight=50%>Small card</card></row>
<row><col><card success height=100%>XS card</card></col><col><card warning height=100%>XS card</card></col> <col><card info height=100%>XS card</card></col> </row>
</col>
</row>

Grid allows creating a grid and populating with boxes. Boxes do not need to be in order as they can specify which column/row they sit on and their spans. However when in mobile mode, the grid is collapsed and boxes are displayed in written order.

<grid cols="20% 50% 20% 10%" rows="4em 5em 6em">
<box grid-row="3 span 1" grid-col="3 span 2" border-width=1px border-color=blue>Box 1</box>
<box grid-row="1 span 3" grid-col="2 span 1" border-width=1px border-color=blue>Box 2</box>
<box grid-row="1 span 2" grid-col="1 span 1" border-width=1px border-color=blue>Box 3</box>
<box grid-row="2 span 1" grid-col="4 span 1" border-width=1px border-color=blue>Box 4</box>
<box grid-row="1 span 1" grid-col="3 span 2" border-width=1px border-color=blue>Box 5</box>
<box grid-row="2 span 1" grid-col="3 span 1" border-width=1px border-color=blue>Box 6</box>
<box grid-row="3 span 1" grid-col="1 span 1" border-width=1px border-color=blue>Box 7</box>
</grid>

The above advanced rows as a grid

<grid cols="3fr 1fr 1fr 1fr" rows="1fr 1fr 1fr">
<box grid-col="1 span 1" grid-row="1 span 3"><card primary>Big card</card></box>
<box grid-col="2 span 3" grid-row="1 span 1"><card secondary>Small card</card></box>
<box grid-col="2 span 3" grid-row="2 span 1"><card danger>Small card</card></box>
<box grid-col="2 span 1" grid-row="3 span 1"><card success>XS card</card></box>
<box grid-col="3 span 1" grid-row="3 span 1"><card warning>XS card</card></box>
<box grid-col="4 span 1" grid-row="3 span 1"><card info>XS card</card></box>
</grid>

The following headings are not recognized by dokuwiki for TOC or can be linked/anchored to.

Heading 1 https://github.com/ with a link!

Heading 2 http://github.com/ with a link! and some italic

Heading 3 http://github.com/ with a link!

Heading 4 http://github.com/ with a link!

Heading 5 http://github.com/ with a link!

<heading 1>Heading 1 [[https://github.com/]] with a link!</heading>
<heading 2>Heading 2 [[http://github.com/]] with a link! //and some italic//</heading>
<heading 3>Heading 3 [[http://github.com/]] with a link!</heading>
<heading 4>Heading 4 [[http://github.com/]] with a link!</heading>
<heading 5>Heading 5 [[http://github.com/]] with a link!</heading>

<hr>

<icon fa pencil>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<listgroup>
<listgroup-item>Cras justo odio</listgroup-item>
<listgroup-item>Dapibus ac facilisis in</listgroup-item>
<listgroup-item>Morbi leo risus</listgroup-item>
<listgroup-item>Porta ac consectetur ac</listgroup-item>
<listgroup-item>Vestibulum at eros</listgroup-item>
</listgroup>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

<listgroup>
<listgroup-item active>Cras justo odio</listgroup-item>
<listgroup-item>Dapibus ac facilisis in</listgroup-item>
<listgroup-item>Morbi leo risus</listgroup-item>
</listgroup>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

<listgroup>
<listgroup-item disabled>Cras justo odio</listgroup-item>
<listgroup-item>Dapibus ac facilisis in</listgroup-item>
<listgroup-item>Morbi leo risus</listgroup-item>
</listgroup>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac

<listgroup>
<listgroup-item active url="https://github.com/">Cras justo odio</listgroup-item>
<listgroup-item url="https://github.com/">Dapibus ac facilisis in</listgroup-item>
<listgroup-item url="https://github.com/">Morbi leo risus</listgroup-item>
<listgroup-item disabled url="https://github.com/">Porta ac consectetur ac</listgroup-item>
</listgroup>

For use in cards or other elements

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac

<listgroup flush>
<listgroup-item>Cras justo odio</listgroup-item>
<listgroup-item>Dapibus ac facilisis in</listgroup-item>
<listgroup-item>Morbi leo risus</listgroup-item>
<listgroup-item>Porta ac consectetur ac</listgroup-item>
</listgroup>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

<listgroup shadow>
<listgroup-item>Cras justo odio</listgroup-item>
<listgroup-item>Dapibus ac facilisis in</listgroup-item>
<listgroup-item>Morbi leo risus</listgroup-item>
</listgroup>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

<listgroup horizontal>
<listgroup-item>Cras justo odio</listgroup-item>
<listgroup-item>Dapibus ac facilisis in</listgroup-item>
<listgroup-item>Morbi leo risus</listgroup-item>
</listgroup>

• Cras justo odio
• A simple primary item
• A simple secondary item
• A simple success item
• A simple warning item
• A simple danger item
• A simple light item
• A simple dark item

<listgroup>
<listgroup-item>Cras justo odio</listgroup-item>
<listgroup-item primary>A simple primary item</listgroup-item>
<listgroup-item secondary>A simple secondary item</listgroup-item>
<listgroup-item success>A simple success item</listgroup-item>
<listgroup-item warning>A simple warning item</listgroup-item>
<listgroup-item danger>A simple danger item</listgroup-item>
<listgroup-item light>A simple light item</listgroup-item>
<listgroup-item dark>A simple dark item</listgroup-item>
</listgroup>

• Cras justo odio14
• Dapibus ac facilisis in4
• Morbi leo risus1

<listgroup>
<listgroup-item>Cras justo odio<badge>14</badge></listgroup-item>
<listgroup-item>Dapibus ac facilisis in<badge>4</badge></listgroup-item>
<listgroup-item>Morbi leo risus<badge>1</badge></listgroup-item>
</listgroup>

• List group item heading

  Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

  Donec id elit non mi porta.

• List group item heading

  Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

  Donec id elit non mi porta.

• List group item heading

  Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

  Donec id elit non mi porta.

<listgroup width=18em>
<listgroup-item content-vertical url="https://github.com/">
<heading 3>List group item heading</heading>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<small>Donec id elit non mi porta.</small>
</listgroup-item>
<listgroup-item content-vertical text-center url="https://github.com/">
<heading 3>List group item heading</heading>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<small>Donec id elit non mi porta.</small>
</listgroup-item>
<listgroup-item content-vertical text-right url="https://github.com/">
<heading 3>List group item heading</heading>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<small>Donec id elit non mi porta.</small>
</listgroup-item>
</listgroup>

<pagenation shadow>
<pagenation-item url="digital_literacy:mikio:anotherpage">
<pagenation-item url="digital_literacy:mikio:start">
<pagenation-item url="digital_literacy:mikio:thirdpage">
</pagenation>

<placeholder text="some text">

<placeholder text="some text" width=40em height=20em>

<placeholder text="some text" width=20em height=10em color=red text-color=white>

<progressbar>
<progressbar width=25>
<progressbar width=50>
<progressbar width=75>
<progressbar width=100>

<progressbar width=25 text="25%">

<progressbar width=25 height=2px>
<progressbar width=25 height=40px>

<progressbar secondary width=15>
<progressbar success width=30>
<progressbar warning width=45>
<progressbar danger width=45>
<progressbar info width=60>
<progressbar light width=75>
<progressbar dark width=90>

<progressbar striped width=15>
<progressbar secondary striped width=15>
<progressbar success striped width=30>
<progressbar warning striped width=45>
<progressbar danger striped width=45>
<progressbar info striped width=60>

<progressbar danger striped animated width=75>

Setattr allows you to set attributes for a box to a variable for reuse

<setattr name=mybox border-width=1px border-color=green>
<setattr name=otherbox border-width=2px border-color=blue>

<box attr=mybox>The box</box>
<box attr=otherbox>The box 2</box>
<box attr=mybox>The box 3</box>
<box attr=otherbox>The box 4</box>

<row>
<col><button>No shadow</button></col>
<col><button shadow>Normal shadow</button></col>
<col><button shadow-lg>Large shadow</button></col>
<col><button shadow-sm>Small shadow</button></col>
</row>

<statistic title=Downloads number=5500>
<statistic title=Views number=44500 below>

• Shipping

  Choose your shipping options

• Billing

  Enter your billing information

• Thanks

  Thanks for your purchase

<steps>
<step icon="fa truck" title="Shipping" complete>Choose your shipping options</step>
<step icon="fa file-text-o" title="Billing" complete>Enter your billing information</step>
<step icon="fa check" title="Thanks">Thanks for your purchase</step>
</steps>

• Shipping

  Choose your shipping options

• Billing

  Enter your billing information

• Thanks

  Thanks for your purchase

<steps shadow>
<step icon=fa truck" title="Shipping" complete>Choose your shipping options</step>
<step icon=fa file-text-o" title="Billing" complete>Enter your billing information</step>
<step icon=fa check" title="Thanks">Thanks for your purchase</step>
</steps>

• Shipping

  Choose your shipping options

• Billing

  Enter your billing information

• Thanks

  Thanks for your purchase

<steps>
<step icon="fa truck" title="Shipping" complete url="http://github.com/">Choose your shipping options</step>
<step icon="fa file-text-o" title="Billing" complete url="http://github.com/">Enter your billing information</step>
<step icon="fa check" title="Thanks" url="http://github.com/">Thanks for your purchase</step>
</steps>

• Shipping

  Choose your shipping options

• Billing

  Enter your billing information

• Thanks

  Thanks for your purchase

<steps>
<step icon="fa truck" title="Shipping" primary url="http://github.com/">Choose your shipping options</step>
<step icon="fa file-text-o" title="Billing" danger url="http://github.com/">Enter your billing information</step>
<step icon="fa check" title="Thanks" success url="http://github.com/">Thanks for your purchase</step>
</steps>

• A tab
• Second tab
• The third tab

This is the content of the first tab
here is a picture

Only a button is here

Nothing here

<tab-group>
<tab title="A tab">
This is the content of the first tab\\ 
here is a picture <box width=100px height=100px>{{:badgeduino_002b.jpg?nolink|}}</box>
</tab>
<tab title="Second tab">
Only a <button url="http://slq.qld.gov.au/" newtab>button</button> is here
</tab>
<tab disabled title="The third tab">
Nothing here
</tab>
</tab-group>

This is red text This is green text This is black, half alpha text

<text color="red">This is red text</text>
<text color="#00FF00">This is green text</text>
<text color="rgba(0,0,0,.5)">This is black, half alpha text</text>

80% Size 100% Size 150% Size 200% Size

<text size=80%>80% Size</text>
<text size=100%>100% Size</text>
<text size=150%>150% Size</text>
<text size=200%>200% Size</text>

This is red text This is green text This is black, half alpha text

<text background-color="red">This is red text</text>
<text background-color="#00FF00">This is green text</text>
<text background-color="rgba(0,0,0,.5)">This is black, half alpha text</text>

Font weight 100 Font weight 500 Font weight 900 Font weight Bolder Font weight Lighter

<text weight=100>Font weight 100</text>
<text weight=500>Font weight 500</text>
<text weight=900>Font weight 900</text>
<text weight=bolder>Font weight Bolder</text>
<text weight=lighter>Font weight Lighter</text>

Italic Underline

<text style=italic>Italic</text>
<text text-decoration=underline>Underline</text>

Text inline 1 Text inline 2 Text inline 3 Text block 1 Text block 2 Text block 3

<text>Text inline 1</text>
<text>Text inline 2</text>
<text>Text inline 3</text>
<text block>Text block 1</text>
<text block>Text block 2</text>
<text block>Text block 3</text>

• A tab
• Second tab
• The third tab

This is the content of the first tab
here is a picture

Only a button is here

Nothing here

<tab-group>
<tab title="A tab">
This is the content of the first tab\\ 
here is a picture <box width=100px height=100px>{{:badgeduino_002b.jpg?nolink|}}</box>
</tab>
<tab title="Second tab">
Only a <button url="http://slq.qld.gov.au/" newtab>button</button> is here
</tab>
<tab disabled title="The third tab">
Nothing here
</tab>
</tab-group>

Hover me

<button tooltip="This is not a good tip">Hover me</button>

<quiz>
<quiz-item choice question="What is the best animal?" text="I don't know" options="dog|cat" answer="cat">
<quiz-item choice question="What is the best food?" options="chicken|fish" answer="chicken">
<quiz-item choice question="What is the fruit?" options="banana|apple" answer="apple">
</quiz>

This is the location of the anchor

<anchor id="my_anchor">