elements.md

title	feature_text	feature_image	description	aside	sidebar_type
Elements	A demo of Markdown and HTML includes	https://picsum.photos/2560/600?image=873	A demo of Markdown and HTML includes	true	right

{% assign posts = site.posts | where_exp: "post", "post.categories contains 'Training Videos'" %}

All Lessons

{% for post in posts %}

Lesson {{ post.lesson_number }}

{{ post.title }}

{{ post.description }}

{{ post.duration }}

{% endfor %}

<style> .course-card { margin-bottom: 1.5rem; } .course-thumbnail img { width: 100%; height: auto; } .course-bookmark { position: absolute; top: 1rem; right: 1rem; } .course-meta { display: flex; justify-content: space-between; } .progress-circle { --size: 2.5rem; --pro: 0; width: var(--size); height: var(--size); border-radius: 50%; background: conic-gradient(#00d1b2 var(--pro), #f5f5f5 0 100%); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; } </style>

Courses

Filters

Search

Category

• Admin
• Business
• Design
• Development

Tags

• Admin
• Apex
• Basics
• Beginner
• Developer
• Fundamental
• Some Tags

Level

• All Levels
• Beginner
• Intermediate
• Expert

Price

• Free
• Paid

Clear All Filters

Salesforce Fundamentals: Master the Basics

By Admin

Category: Admin

2 1h 30m

Enroll Course

My First Course

By Admin

Categories: Business, Design

5 1h 27m

Price: ₹21.00 ₹1.00

50% 50% Booked

Add to cart

Apex Beginner: Learn Salesforce Programming Language

By Admin

Category: Development

1 1h

Enroll Course

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

1. Item one
2. Item two
3. Item three
4. Item four
5. 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

HTML Includes

Contact form

{% include site-form.html %}

{% raw %}{% include site-form.html %}{% endraw %}

Demo map embed

{% include map.html id="1UT-2Z-Vg_MG_TrS5X2p8SthsJhc" title="Coffee shop map" %}

{% raw %}{% include map.html id="XXXXXX" title="Coffee shop map" %}{% endraw %}

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" %}

{% 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 %}

Icon include

{% 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 %}

Video include

{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %}

{% raw %}{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %}{% endraw %}

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" %}

{% 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 %}