Skip to content

Latest commit

 

History

History
330 lines (270 loc) · 11.3 KB

elements.md

File metadata and controls

330 lines (270 loc) · 11.3 KB
title feature_text feature_image description aside layout
Elements
A demo of Markdown and HTML includes
A demo of Markdown and HTML includes
true
page

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

A small element

A Link

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.

Lists

Unordered List

  • An item
  • An item
  • An item
  • An item
  • An item

Unordered List

  1. Item one
  2. Item two
  3. Item three
  4. Item four
  5. Item five

A simple blockquote that appears with a typing effect.

  • Author Name

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/" icon="twitter" %} {% include button.html text="Primary Button" link="#" color="primary" %} {% include button.html text="Info Button" link="#" color="info" %} {% include button.html text="Success Button" link="#" color="success" %} {% include button.html text="Warning Button" link="#" color="warning" %} {% include button.html text="Danger Button" link="#" color="danger" %} {% include button.html text="Small Primary" link="#" color="primary" size="small" %} {% include button.html text="Large Primary" link="#" color="primary" size="large" %} {% include button.html text="Full Width Button" link="#" color="primary" fullwidth=true %} {% include button.html text="Outlined Button" link="#" color="primary" outlined=true %} {% include button.html text="Rounded Button" link="#" color="primary" rounded=true %} {% include button.html text="Hovered Button" link="#" color="primary" hovered=true %} {% include button.html text="Active Button" link="#" color="primary" active=true %} {% include button.html text="Button with Icon" link="#" color="primary" icon="bold" %} 
{% raw %}
{% include button.html text="A button" link="https://david.darn.es" %}
{% include button.html text="A button with icon" link="https://twitter.com/imswarnil" icon="home" %}
{% include button.html text="Primary Button" link="#" color="primary" %}
{% include button.html text="Info Button" link="#" color="info" %}
{% include button.html text="Success Button" link="#" color="success" %}
{% include button.html text="Warning Button" link="#" color="warning" %}
{% include button.html text="Danger Button" link="#" color="danger" %}
{% include button.html text="Small Primary" link="#" color="primary" size="small" %}
{% include button.html text="Large Primary" link="#" color="primary" size="large" %}
{% include button.html text="Full Width Button" link="#" color="primary" fullwidth=true %}
{% include button.html text="Outlined Button" link="#" color="primary" outlined=true %}
{% include button.html text="Rounded Button" link="#" color="primary" rounded=true %}
{% include button.html text="Hovered Button" link="#" color="primary" hovered=true %}
{% include button.html text="Active Button" link="#" color="primary" active=true %}
{% include button.html text="Button with Icon" link="#" color="primary" icon="bold" %}{% endraw %}

Embed

Youtube Video Embed

{% include embed/youtube.html id="uV3eTXpEBOg" title="Rick Astley - Never Gonna Give You Up" description="Music video by Rick Astley performing Never Gonna Give You Up." author="Rick Astley" date = "15-July-1995" start_time="0" end_time="0" autoplay="false" controls="true" muted="false" showinfo="true" loop="false" %}

{% raw %} {% include embed/youtube.html 
    id="uV3eTXpEBOg" 
    title="Rick Astley - Never Gonna Give You Up" 
    description="Music video by Rick Astley performing Never Gonna Give You Up." 
    author="Rick Astley"
    date = "15-July-1995" 
    start_time="0" 
    end_time="0" 
    autoplay="false" 
    controls="true" 
    muted="false" 
    showinfo="true" 
    loop="false" 
  %}{% endraw %}

Tweet Embed

{% include embed/tweet.html id="1465053672593784834" custom_title="Check out this amazing tweet!" user_handle="tweet" %}

{% raw %}{% include embed/tweet.html 
    id="1465053672593784834"
    custom_title="Check out this amazing tweet!"
    user_handle="tweet"
  %}{% endraw %}

Instagram Embed

Sample Instagram Embed

{% include embed/instagram.html id="C6a6rKcJLh7" custom_title="Check out this amazing post!" user_handle="frazmohammad" %}

Spotify Embed

{% include embed/spotify.html id="36N5awamOX6XX5pQn3aFXZ" custom_title="Check out this amazing track!" user_handle="yourusername" theme="0" height="152" %}

{% include utility/icon.html type="image" src="https://cdn-icons-png.flaticon.com/512/317/317031.png" alt="Example Icon" size="is-64x64" %} {% include utility/icon.html type="font-awesome" name="twitter" size="is-large" %} {% include utility/icon.html type="material" name="home" size="is-medium" %}

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 %}
<style> .pagination-box { justify-content: space-between; align-items: center; } </style>