Elements

Sample Content

Praesent ac adipiscing ullamcorper semper ut amet ac risus. Lorem sapien ut odio odio nunc. Ac adipiscing nibh porttitor erat risus justo adipiscing adipiscing amet placerat accumsan. Vis. Faucibus odio magna tempus adipiscing a non. In mi primis arcu ut non accumsan vivamus ac blandit adipiscing adipiscing arcu metus praesent turpis eu ac lacinia nunc ac commodo gravida adipiscing eget accumsan ac nunc adipiscing adipiscing.

Elements

Text

This is bold. This is italic. This is ^superscript text and this is _subscript text. This is underlined and this is code: for (;;) { ... }.

this is a code block

Finally this is a link.

---

Heading level 2

Heading level 3

Heading level 4

---

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

Lists

Unordered

• Dolor etiam magna etiam.

• Sagittis lorem eleifend.

• Felis dolore viverra.

Ordered

1. Dolor etiam magna etiam.

2. Sagittis lorem eleifend.

3. Felis dolore viverra.

Actions

• Default
• Default

• Small
• Small

• Default
• Default

• Small
• Small

• Default
• Default

• Small
• Small

Pagination

• Prev
• 1
• 2
• 3
• …
• 8
• 9
• 10
• Next

Blockquote

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.

Table

Default

Name	Description	Price
Item 1	Ante turpis integer aliquet porttitor	29.99
Item 2	Vis ac commodo adipiscing arcu aliquet	19.99
Item 3	Morbi faucibus arcu accumsan lorem.	29.99
Item 4	Vitae integer tempus condimentum.	19.99
Item 5	Ante turpis integer aliquet porttitor.	29.99

Alternate

Alternate style

Name	Description	Price
Item 1	Ante turpis integer aliquet porttitor	29.99
Item 2	Vis ac commodo adipiscing arcu aliquet	19.99
Item 3	Morbi faucibus arcu accumsan lorem.	29.99
Item 4	Vitae integer tempus condimentum.	19.99
Item 5	Ante turpis integer aliquet porttitor.	29.99

---

Heading level 2

Heading level 3

Heading level 4

---

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

Lists

@@row @@col-6,col-12-small

Unordered

• Dolor etiam magna etiam.

• Sagittis lorem eleifend.

• Felis dolore viverra.

@@ @@col-6,col-12-small

Ordered

1. Dolor etiam magna etiam.

2. Sagittis lorem eleifend.

3. Felis dolore viverra.

@@ <!– col 12 small –> @@ <!– row in lists –>

Actions

<ul class="actions"> <li><a href="#" class="button primary">Default</a></li> <li><a href="#" class="button">Default</a></li> </ul> <ul class="actions small"> <li><a href="#" class="button primary small">Small</a></li> <li><a href="#" class="button small">Small</a></li> </ul>

@@row @@col-6,col-12-small

<ul class="actions stacked"> <li><a href="#" class="button primary">Default</a></li> <li><a href="#" class="button">Default</a></li> </ul>

@@ @@col-6,col-12-small

<ul class="actions stacked"> <li><a href="#" class="button primary small">Small</a></li> <li><a href="#" class="button small">Small</a></li> </ul>

@@ @@col-6,col-12-small

<ul class="actions stacked"> <li><a href="#" class="button primary fit">Default</a></li> <li><a href="#" class="button fit">Default</a></li> </ul>

@@ @@col-6,col-12-small

<ul class="actions stacked"> <li><a href="#" class="button primary small fit">Small</a></li> <li><a href="#" class="button small fit">Small</a></li> </ul>

@@ @@ <!– row for actions –>

Pagination

<ul class="pagination"> <li><span class="button small disabled">Prev</span></li> <li><a href="#" class="page active">1</a></li> <li><a href="#" class="page">2</a></li> <li><a href="#" class="page">3</a></li> <li><span>&hellip;</span></li> <li><a href="#" class="page">8</a></li> <li><a href="#" class="page">9</a></li> <li><a href="#" class="page">10</a></li> <li><a href="#" class="button small">Next</a></li> </ul>

Blockquote

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.

Table

Default

\begin{table}{class="table-wrapper"} | Name | Description | Price | | :–– | :–––––- | :––- | | Item 1 | Ante turpis integer aliquet porttitor | 29.99 | | Item 2 | Vis ac commodo adipiscing arcu aliquet | 19.99 | | Item 3 | Morbi faucibus arcu accumsan lorem. | 29.99 | | Item 4 | Vitae integer tempus condimentum. | 19.99 | | Item 5 | Ante turpis integer aliquet porttitor. | 29.99 | \end{table}

Alternate

\begin{table}{class="table-wrapper alt", caption="Alternate style"} | Name | Description | Price | | :–– | :–––––- | :––- | | Item 1 | Ante turpis integer aliquet porttitor | 29.99 | | Item 2 | Vis ac commodo adipiscing arcu aliquet | 19.99 | | Item 3 | Morbi faucibus arcu accumsan lorem. | 29.99 | | Item 4 | Vitae integer tempus condimentum. | 19.99 | | Item 5 | Ante turpis integer aliquet porttitor. | 29.99 | \end{table}

@@

Buttons

• Primary
• Default

• Large
• Default
• Small

• Large
• Default
• Small

• Fit
• Fit

• Fit + Small
• Fit + Small

• Icon
• Icon

• Primary
• Default

Image

Fit

Left & Right

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.

Box

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum.

Preformatted

function shufflesort(deck)
  i = 0
  while (!isordered(deck))
    println("Iteration $i")
    shuffle(deck)
    i += 1
  end
end

Heading level 2

Heading level 3

Heading level 4

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

Lists

@@row @@col-6,col-12-small

Unordered

• Dolor etiam magna etiam.

• Sagittis lorem eleifend.

• Felis dolore viverra.

@@ @@col-6,col-12-small

Ordered

1. Dolor etiam magna etiam.

2. Sagittis lorem eleifend.

3. Felis dolore viverra.

@@ <!– col 12 small –> @@ <!– row in lists –>

Actions

<ul class="actions"> <li><a href="#" class="button primary">Default</a></li> <li><a href="#" class="button">Default</a></li> </ul> <ul class="actions small"> <li><a href="#" class="button primary small">Small</a></li> <li><a href="#" class="button small">Small</a></li> </ul>

@@row @@col-6,col-12-small

<ul class="actions stacked"> <li><a href="#" class="button primary">Default</a></li> <li><a href="#" class="button">Default</a></li> </ul>

@@ @@col-6,col-12-small

<ul class="actions stacked"> <li><a href="#" class="button primary small">Small</a></li> <li><a href="#" class="button small">Small</a></li> </ul>

@@ @@col-6,col-12-small

<ul class="actions stacked"> <li><a href="#" class="button primary fit">Default</a></li> <li><a href="#" class="button fit">Default</a></li> </ul>

@@ @@col-6,col-12-small

<ul class="actions stacked"> <li><a href="#" class="button primary small fit">Small</a></li> <li><a href="#" class="button small fit">Small</a></li> </ul>

@@ @@ <!– row for actions –>

Pagination

<ul class="pagination"> <li><span class="button small disabled">Prev</span></li> <li><a href="#" class="page active">1</a></li> <li><a href="#" class="page">2</a></li> <li><a href="#" class="page">3</a></li> <li><span>&hellip;</span></li> <li><a href="#" class="page">8</a></li> <li><a href="#" class="page">9</a></li> <li><a href="#" class="page">10</a></li> <li><a href="#" class="button small">Next</a></li> </ul>

Blockquote

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.

Table

Default

\begin{table}{class="table-wrapper"} | Name | Description | Price | | :–– | :–––––- | :––- | | Item 1 | Ante turpis integer aliquet porttitor | 29.99 | | Item 2 | Vis ac commodo adipiscing arcu aliquet | 19.99 | | Item 3 | Morbi faucibus arcu accumsan lorem. | 29.99 | | Item 4 | Vitae integer tempus condimentum. | 19.99 | | Item 5 | Ante turpis integer aliquet porttitor. | 29.99 | \end{table}

Alternate

\begin{table}{class="table-wrapper alt", caption="Alternate style"} | Name | Description | Price | | :–– | :–––––- | :––- | | Item 1 | Ante turpis integer aliquet porttitor | 29.99 | | Item 2 | Vis ac commodo adipiscing arcu aliquet | 19.99 | | Item 3 | Morbi faucibus arcu accumsan lorem. | 29.99 | | Item 4 | Vitae integer tempus condimentum. | 19.99 | | Item 5 | Ante turpis integer aliquet porttitor. | 29.99 | \end{table}

@@ <!– END OF FIRST COLUMN col 12 medium –>

<!– ============================================== SECOND COLUMN ============================================== –>

@@col-6,col-12-medium

Buttons

<ul class="actions"> <li><a href="#" class="button primary">Primary</a></li> <li><a href="#" class="button">Default</a></li> </ul>

@@row @@col-6,col-12-xsmall

<ul class="actions stacked"> <li><a href="#" class="button large">Large</a></li> <li><a href="#" class="button">Default</a></li> <li><a href="#" class="button small">Small</a></li> </ul>

@@ <!– xsmall col –> @@col-6,col-12-xsmall

<ul class="actions stacked"> <li><a href="#" class="button primary large">Large</a></li> <li><a href="#" class="button primary">Default</a></li> <li><a href="#" class="button primary small">Small</a></li> </ul>

@@ <!– xsmall col –> @@ <!– row in buttons –>

<ul class="actions fit"> <li><a href="#" class="button primary fit">Fit</a></li> <li><a href="#" class="button fit">Fit</a></li> </ul> <ul class="actions fit small"> <li><a href="#" class="button primary fit small">Fit + Small</a></li> <li><a href="#" class="button fit small">Fit + Small</a></li> </ul> <ul class="actions"> <li><a href="#" class="button primary icon solid fa-search">Icon</a></li> <li><a href="#" class="button icon solid fa-download">Icon</a></li> </ul> <ul class="actions"> <li><span class="button primary disabled">Primary</span></li> <li><span class="button disabled">Default</span></li> </ul>

Image

Fit

@@image,fit @@

@@box,alt @@row,gtr-50,gtr-uniform @@col-4 @@image,fit @@ @@ @@col-4 @@image,fit @@ @@ @@col-4 @@image,fit @@ @@ <!– break –> @@col-4 @@image,fit @@ @@ @@col-4 @@image,fit @@ @@ @@col-4 @@image,fit @@ @@ <!– break –> @@col-4 @@image,fit @@ @@ @@col-4 @@image,fit @@ @@ @@col-4 @@image,fit @@ @@ @@ <!– row, gtr50, ...–> @@ <!– box alt –>

Left & Right

@@image,left @@

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.

@@image,right @@

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.

Box

@@box Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum. @@

Preformatted

function shufflesort(deck) i = 0 while (!isordered(deck)) println("Iteration $i") shuffle(deck) i += 1 end end

@@ <!– END OF SECOND COLUMN col 12 medium –>

@@