title | feature_text | feature_image | excerpt | aside |
---|---|---|---|---|
Elements |
A demo of Markdown and HTML includes
|
A demo of Markdown and HTML includes |
true |
A small element
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
{% include site-form.html %}
{% raw %}{% include site-form.html %}{% endraw %}
{% include map.html id="1UT-2Z-Vg_MG_TrS5X2p8SthsJhc" title="Coffee shop map" %}
{% raw %}{% include map.html id="XXXXXX" title="Coffee shop map" %}{% endraw %}
{% 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" %}
{% raw %}{% 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" %}{% endraw %}
{% include icon.html id="twitter" title="twitter" %} {% include icon.html id="linkedin" title="twitter" %}
{% raw %}{% include icon.html id="twitter" title="twitter" %}
[{% include icon.html id="linkedin" title="twitter" %}](https://www.linkedin.com/in/daviddarnes){% endraw %}
{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %}
{% raw %}{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %}{% endraw %}
{% 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" %}
{% raw %}{% 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" %}{% endraw %}