Examples
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
A small element
A link Lorem ipsum dolor sit amet, consectetur adip* isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.
Duis aute irure dolor in A link reprehenderit in voluptate velit esse cillum bold text dolore eu fugiat nulla pariatur. Excepteur span element sint occaecat cupidatat non proident, sunt italicised text in culpa qui officia deserunt mollit anim id some code est laborum.
- An item
- An item
- An item
- An item
- An item
- Item one
- Item two
- Item three
- Item four
- Item five
A simple blockquote
Some HTML…
<blockquote cite="http://www.imdb.com/title/tt0284978/quotes/qt1375101">
<p>You planning a vacation, Mr. Sullivan?</p>
<footer>
<a href="http://www.imdb.com/title/tt0284978/quotes/qt1375101">Sunways Security Guard</a>
</footer>
</blockquote>
…CSS…
blockquote {
text-align: center;
font-weight: bold;
}
blockquote footer {
font-size: .8rem;
}
…and JavaScript
const blockquote = document.querySelector("blockquote")
const bolden = (keyString, string) =>
string.replace(new RegExp(keyString, 'g'), '<strong>'+keyString+'</strong>')
blockquote.innerHTML = bolden("Mr. Sullivan", blockquote.innerHTML)
Single line of code
Advanced elements
Justify text block
The following text is justified as you are used to see in newspapers and articles. It is a great way to present a block of text in a clean and structured way.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Highlighted section example
„It isn’t time yet. It can’t be tea-time even, leastways not in decent places where there is tea-time. “
Abmonition examples
FYI this should not get away from your attention.
This is a big warning!
This is a bad error!
A: Many little fingers.
Multiple column examples
### Column 2 Header (will be fixed in the future)
This is the content for column 2.
Yes, you can!
- List item 1
- List item 2
Column 1
Content for column 1
Info in column 1
Column 2
Content for column 2
Warning in column 2
Column 3
Content for column 3
Error in column 3
HTML Includes
Demo map embed
{% include map.html id="XXXXXX" title="Coffee shop map" %}
Button include
{% include button.html text="A button" link="https://david.darn.es" %}
{% include button.html text="A button with icon" link="https://twitter.com/daviddarnes" icon="twitter" %}
Icon include
{% include icon.html id="twitter" title="twitter" %}
[{% include icon.html id="linkedin" title="twitter" %}](https://www.linkedin.com/in/daviddarnes)
Video include
{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %}
Image includes
{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Image with caption" width="300" height="800" %}
{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Right aligned image" position="right" width="300" height="800" %}
{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Left aligned image" position="left" width="300" height="800" %}
{% include figure.html image="https://picsum.photos/1600/800?image=894" alt="Image with just alt text" %}