:root {
  --ls-primary: var(--ls-purple);
  --ls-primary-subdued: var(--ls-purple-subdued);
  --ls-primary-disabled: var(--ls-purple-light);
  --ls-secondary: var(--ls-purple-dark);
  --ls-secondary-subdued: var(--ls-purple-dark);
  --ls-secondary-disabled: var(--ls-purple-dark);
  --ls-tertiary: var(--ls-orange);
  --ls-error: var(--ls-red);
  --ls-error-disabled: var(--ls-red-disabled);
  --ls-success: var(--ls-teal);
  --ls-warning: var(--ls-yellow);
  --ls-text-color: var(--ls-dark);
  --ls-text-color-inverted: var(--ls-light);
  --ls-link-color: var(--ls-secondary);
  --ls-link-color-active: var(--ls-primary);

  /* color vars */
  --ls-purple: hsla(285, 100%, 50%, 1); /* #BF00FF */
  --ls-purple-subdued: hsla(272, 100%, 15%, 1); /* #28004B */
  --ls-purple-light: hsla(272, 94%, 25%, 0.3); /* #44047c */
  --ls-purple-dark: hsla(272, 94%, 25%, 1); /* #44047c */
  --ls-orange: hsla(37, 100%, 50%, 1); /* #FF9E00 */
  --ls-orange-subdued: hsla(37, 100%, 30%, 1);
  --ls-orange-light: hsla(37, 100%, 50%, 0.3);
  --ls-dark: hsla(0, 0%, 2%, 1); /* #16161d */
  --ls-dark-light: hsla(0, 0%, 2%, 0.23);
  --ls-dark-blue: #34495e;
  --ls-gray: #ddd;
  --ls-dark-gray: #202020;
  --ls-mid-gray: #b0b0b0;
  --ls-light-gray: hsla(0, 22%, 96%, 1); /* #f8f4f4 */
  --ls-light-gray-light: hsla(0, 22%, 96%, 0.23);
  --ls-light: #fff;
  --ls-red: #fc2636;
  --ls-red-disabled: #fc2636;
  --ls-green: #4bb543;
  --ls-teal: #48d2a0;
  --ls-yellow: #fcce30;
}

Styles

<div class="ls-outlined-light"></div>
<div class="ls-big-shadow"></div>
<div class="ls-subtle-shadow"></div>
<div class="ls-inner-shadow"></div>
<div class="ls-filled-outline"></div>
<div class="ls-active-grey"></div>
<div class="ls-active-purple"></div>

Poppins - Regular

Geometric sans serif typefaces have been a popular design tool ever since these actors took to the world’s stage. Poppins is one of the new comers to this long tradition. With support for the Devanagari and Latin writing systems, it is an internationalist take on the genre.

<p>Geometric sans serif typefaces have been a popular design tool ever since these actors took to the world’s stage. Poppins is one of the new comers to this long tradition. With support for the Devanagari and Latin writing systems, it is an internationalist take on the genre.</p>

Poppins - Bold

Geometric sans serif typefaces have been a popular design tool ever since these actors took to the world’s stage. Poppins is one of the new comers to this long tradition. With support for the Devanagari and Latin writing systems, it is an internationalist take on the genre.

• This is bold text
• This is italic text
• This is deleted text

<p>
<bold>Geometric sans serif typefaces have been a popular design tool ever since these actors took to the world’s stage. Poppins is one of the new comers to this long tradition. With support for the Devanagari and Latin writing systems, it is an internationalist take on the genre.</bold>
</p>

<ul>
<li><strong>This is bold text</strong></li>
<li><em>This is italic text</em></li>
<li><s>This is deleted text</s></li>
</ul>

Responsive container

This style site is wrapped in the responsive container class.

<div class="ls-container">Hello responsive breakpoints</div>

Heading Levels

<h1>Heading Level 1</h1> <h1 class="ls-uppercase">Heading Level 1</h1>
<h2>Heading Level 2</h2> <h2 class="ls-uppercase">Heading Level 2</h2>
<h3>Heading Level 3</h3> <h3 class="ls-uppercase">Heading Level 3</h3>
<h4>Heading Level 4</h4> <h4 class="ls-uppercase">Heading Level 4</h4>
<h5>Heading Level 5</h5> <h5 class="ls-uppercase">Heading Level 5</h5>
<h6>Heading Level 6</h6> <h6 class="ls-uppercase">Heading Level 6</h6>

Paragraph

Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum interdum vestibulum felis ac molestie. Praesent aliquet quam et libero dictum, vitae dignissim leo eleifend. In in turpis turpis. Quisque justo turpis, vestibulum non enim nec, tempor mollis mi. Sed vel tristique quam.

<p>Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum interdum vestibulum felis ac molestie. Praesent aliquet quam et libero dictum, vitae dignissim leo eleifend. In in turpis turpis. Quisque justo turpis, vestibulum non enim nec, tempor mollis mi. Sed vel tristique quam.</p>

Body

<div class="ls-body">
<p>Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum interdum vestibulum felis ac molestie. Praesent aliquet quam et libero dictum, vitae dignissim leo eleifend. In in turpis turpis. Quisque justo turpis, vestibulum non enim nec, tempor mollis mi. Sed vel tristique quam.</p>
</div>

Body Small copy

Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum interdum vestibulum felis ac molestie. Praesent aliquet quam et libero dictum, vitae dignissim leo eleifend. In in turpis turpis. Quisque justo turpis, vestibulum non enim nec, tempor mollis mi. Sed vel tristique quam.

<div class="ls-small-body">
<p>Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum interdum vestibulum felis ac molestie. Praesent aliquet quam et libero dictum, vitae dignissim leo eleifend. In in turpis turpis. Quisque justo turpis, vestibulum non enim nec, tempor mollis mi. Sed vel tristique quam.</p>
</div>

<p><small>Nam porttitor blandit accumsan.</small> Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum interdum vestibulum felis ac molestie. Praesent aliquet quam et libero dictum, vitae dignissim leo eleifend. In in turpis turpis. Quisque justo turpis, vestibulum non enim nec, tempor mollis mi. Sed vel tristique quam.</p>

Quote

Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

<blockquote>
  <p>Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
</blockquote>

TODO: Pullquote style

<aside class="pquote">
  <blockquote>
    <p>Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
  </blockquote>
</aside>

Abbreviations

This is a HTML abbreviation example.

<p>This is a <abbr title="Hyper Text Markup Language">HTML</abbr> abbreviation example.</p>

Code

This has inline-code.

<p>This has <code>inline-code</code>.</p>

This is a codeblock:

console.log('hello world')

<pre><code class="hljs language-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hello world'</span>)
</code></pre>

Depending on the highlight.js theme you use, you will see themes indipendent of this style sheet. Unstyled code blocks look like this:

<pre><code class="hljs language-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hello world'</span>)
</code></pre>

User Input

ctrlaltdelete

qwerty

azerty

<kbd>ctrl</kbd><kbd>alt</kbd><kbd>delete</kbd>

<kbd>q</kbd><kbd>w</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>

<kbd>a</kbd><kbd>z</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>

Definitions

Term 1

Definition 1 with lazy continuation.

Term 2 with inline markup

Definition 2

  { some code, part of Definition 2 }

Third paragraph of definition 2.

<dl>
<dt>Term 1</dt>
<dd>
<p>Definition 1
with lazy continuation.</p>
</dd>
<dt>Term 2 with <em>inline markup</em></dt>
<dd>
<p>Definition 2</p>
<pre><code class="hljs">  { some code, part of Definition 2 }
</code></pre>
<p>Third paragraph of definition 2.</p>
</dd>
</dl>

Horizontal Rules

<hr></hr>
<hr></hr>
<hr></hr>

Tables

<table>
<thead>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td>engine</td>
<td>engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td>ext</td>
<td>extension to be used for dest files.</td>
</tr>
</tbody>
</table>

Right aligned columns

<table>
<thead>
<tr>
<th style="text-align:right">Option</th>
<th style="text-align:right">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:right">data</td>
<td style="text-align:right">path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td style="text-align:right">engine</td>
<td style="text-align:right">engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td style="text-align:right">ext</td>
<td style="text-align:right">extension to be used for dest files.</td>
</tr>
</tbody>
</table>

Text Link

Primary Links

• Text Link Primary

<ul>
<li><a href="#">Text Link Primary</a></li>
</ul>

Secondary Links

• Text Link Secondary

<ul>
<li><a class="ls-link-secondary" href="#">Text Link Secondary</a></li>
</ul>

Underline Links

• Text Link Underline

<ul>
<li><a class="ls-link-underline" href="">Text Link Underline</a></li>
</ul>

Inline Links

Nam porttitor blandit accumsan. Text Link dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Nam porttitor blandit accumsan.

Nam porttitor blandit accumsan. Text Link dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Nam porttitor blandit accumsan.

Nam porttitor blandit accumsan. Text Link dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Nam porttitor blandit accumsan.

Button like link

Button like link

Button like secondary

You can mix the other button styles over this ls-button-like-link class on a tags.

<a class="ls-button-like-link" href="">Button like link</a>
<a class="ls-button-like-link ls-button-secondary" href="">Button like secondary</a>

Text Lists

Small Caps

• About Us
• Work Here
• Team
• Happenings
• Dealer Locator

<ul class="ls-simple-ul">
<li>About Us</li>
<li>Work Here</li>
<li>Team</li>
<li>Happenings</li>
<li>Dealer Locator</li>
</ul>

Uppercase

• About Us
• Work Here
• Team
• Happenings
• Dealer Locator

<ul class="ls-simple-ul ls-uppercase">
<li>About Us</li>
<li>Work Here</li>
<li>Team</li>
<li>Happenings</li>
<li>Dealer Locator</li>
</ul>

Regular / Sub

• About Us
• Work Here
  • Team
  • Happenings
  • Dealer Locator

<ul>
<li>About Us</li>
<li>Work Here
<ul>
<li>Team</li>
<li>Happenings</li>
<li>Dealer Locator</li>
</ul>
</li>
</ul>

Icon / Symbol

TODO

• About Us
• Work Here
• Team
• Happenings
• Dealer Locator

Ordered

1. About Us
2. Work Here
3. Team
4. Happenings
5. Dealer Locator

<ol>
<li>About Us</li>
<li>Work Here</li>
<li>Team</li>
<li>Happenings</li>
<li>Dealer Locator</li>
</ol>

Text States

• Info Text : Grumpy wizards make toxic brew for the evil Queen and Jack.
• Danger Text : Grumpy wizards make toxic brew for the evil Queen and Jack.
• Success Text : Grumpy wizards make toxic brew for the evil Queen and Jack.
• Warning Text : Grumpy wizards make toxic brew for the evil Queen and Jack.
• Danger Text Small : Grumpy wizards make toxic brew for the evil Queen and Jack.

<ul>
  <li><span class="ls-info-text">Info Text : Grumpy wizards make toxic brew for the evil Queen and Jack.</span></li>
  <li><span class="ls-danger-text">Danger Text : Grumpy wizards make toxic brew for the evil Queen and Jack.</span></li>
  <li><span class="ls-success-text">Success Text : Grumpy wizards make toxic brew for the evil Queen and Jack.</span></li>
  <li><span class="ls-warning-text">Warning Text : Grumpy wizards make toxic brew for the evil Queen and Jack.</span></li>
  <li><small class="ls-danger-text">Danger Text Small : Grumpy wizards make toxic brew for the evil Queen and Jack.</small></li>
</ul>

Text Boxes

Text Box Outline

<div class="ls-text-box-outline">
  <p>Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur.</p>

  <div class="ls-body">
    <p>Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. </p>
  </div>
</div>

Text Box Filled

<div class="ls-text-box-filled">
  <p>Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur.</p>

  <div class="ls-body">
    <p>Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. </p>
  </div>
</div>

Buttons

Primary Buttons

<div class="l-button-column">
  <div><button>Button</button></div>
  <div><button disabled>Button</button></div>
</div>

Secondary Buttons

<div class="l-button-column">
  <div><button class="ls-button-secondary">Button</button></div>
  <div><button class="ls-button-secondary" disabled>Button</button></div>
</div>

Danger Button

<div class="l-button-column">
  <div><button class="ls-button-danger">Button</button></div>
  <div><button class="ls-button-danger" disabled>Button</button></div>
</div>

Ghost Buttons

<div class="l-button-column">
  <div><button class="ls-button-ghost">Button</button></div>
  <div><button class="ls-button-ghost" disabled>Button</button></div>
</div>

Dark Buttons

<div class="l-button-column">
  <div><button class="ls-button-dark">Button</button></div>
  <div><button class="ls-button-dark" disabled>Button</button></div>
</div>

Light Buttons

<div class="l-button-column">
  <div><button class="ls-button-light">Button</button></div>
  <div><button class="ls-button-light" disabled>Button</button></div>
</div>

Buttons Big Shadow Primary

<div class="l-button-column">
  <div><button class="ls-button-big-shadow">Button</button></div>
  <div><button disabled class="ls-button-big-shadow">Button</button></div>
</div>

Buttons Big Shadow Ghost

<div class="l-button-column">
  <div><button class="ls-button-ghost ls-button-big-shadow">Button</button></div>
  <div><button disabled class="ls-button-ghost ls-button-big-shadow">Button</button></div>
</div>

Buttons Inner Shadow Primary

<div class="l-button-column">
  <div><button class="ls-button-inner-shadow">Button</button></div>
  <div><button disabled class="ls-button-inner-shadow">Button</button></div>
</div>

Buttons Small

<div class="l-button-column">
  <div><button class="ls-button-small">Default</button></div>
  <div><button class="ls-button-dark ls-button-small">Default</button></div>
  <div><button class="ls-button-ghost ls-button-small">Default</button></div>
  <div><button class="ls-button-light ls-button-small">Default</button></div>
</div>

Button Sizes

<div class="l-button-column">
  <div><button class="ls-button-x-small">X-Small</button></div>
  <div><button class="ls-button-small">Small</button></div>
  <div><button class="ls-button-medium">Medium</button></div>
  <div><button class="ls-button-large">Large</button></div>
  <div><button class="ls-button-x-large">X-Large</button></div>
  <div><button class="ls-button-wide">Wide</button></div>
</div>

Buttons Links

For buttons that sort of look like links, but are not links.

<div class="l-button-column">
  <div><button class="ls-button-link">Button Link</button></div>
  <div><input type='button' value='Input button' class="ls-button-link"></div>
  <div><input type='submit' value='Submit button' class="ls-button-link"></div>
</div>

Checkboxes

Radio

Dropdowns

Choose a pet: –Please choose an option– Dog Cat Hamster Parrot Spider Goldfish

Text Input

<form>
  <div>
    <label for="name">Name (4 to 8 characters):</label>
    <input type="text" id="name" name="name" placeholder="Full Name" required minlength="4" maxlength="8" size="10">
  </div>
  <div>
    <label for="name">Name (4 to 8 characters):</label>
    <input type="text" id="name" name="name" placeholder="Full Name" required minlength="4" maxlength="8" size="10">
  </div>
  <div>
    <label for="name">Name (4 to 8 characters):</label>
    <input type="text" id="name" name="name" placeholder="Full Name" required minlength="4" maxlength="8" size="10">
  </div>
  <div>
    <label for="name">Name (4 to 8 characters):</label>
    <input type="text" id="name" name="name" placeholder="Full Name" required minlength="4" maxlength="8" size="10">
  </div>
  <div>
    <label for="name">Name (4 to 8 characters):</label>
    <input disabled type="text" id="name" name="name" placeholder="Full Name" required minlength="4" maxlength="8" size="10">
  </div>
</form>