Drax CSS Documentations

These docs contains all of the components available with pure css without using any javascript. Go and see how the contents look on any of your devices.


# Grid

The main approach is mobile-first layout, using flexbox as main display. There are two kind of grid system by flexbox, it is row and column. Row is the parent of horizontaly child elements and Column is the vertically children elements.

Row Grid System

Grid system can be divided into 12 sets of columns, use it horizontally with parent class .row with any tags element for child. By default row class will be set as unlimited child equaly size each row, as long as the size is sufficient otherwise the rest child will be wrapped.

.row
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.row.twelve
1
2
3
4
5
6
7
8
9
10
11
12
.row.eleven
1
2
3
4
5
6
7
8
9
10
11
.row.ten
1
2
3
4
5
6
7
8
9
10
.row.nine
1
2
3
4
5
6
7
8
9
.row.eight
1
2
3
4
5
6
7
8
.row.seven
1
2
3
4
5
6
7
.row.six
1
2
3
4
5
6
.row.five
1
2
3
4
5
.row.four
1
2
3
4
.row.three
1
2
3
.row.two
1
2
.row.one
1
<div class="row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

<div class="row twelve">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

<div class="row eleven">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
</div>

<div class="row ten">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

<div class="row nine">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

<div class="row eight">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

<div class="row seven">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

<div class="row six">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<div class="row five">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="row four">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="row three">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="row two">
  <div>1</div>
  <div>2</div>
</div>

<div class="row one">
  <div>1</div>
</div>

Column Grid System

Different with row, column make it possible to vertically child elements with parent class .column. Same with row, without classes the element will grow and shrink to fit the entire container.

.column
.column.twelve
.column.six
.column.twelve
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
<div class="column">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

<div class="column twelve">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

<div class="column six">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

<div class="column twelve">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Expand child

To expand remainder child content can be done with .grow on row or column container. For columns, expanding children only works if you set the element height.

1
2
3
4
5

Expand specific child only use parent class name like .three following column span number.

1
.xs-2
3
4
5

Lazy expand with .fill to fit single row.

1
.fill
.fill
1

Expanding column

.fill
1
<div class="row three grow">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="row three center">
  <div>1</div>
  <div class="xs-2">.xs-2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="row three center">
  <div>1</div>
  <div class="fill">.fill</div>
</div>
<div class="row three center">
  <div class="fill">.fill</div>
  <div>1</div>
</div>

<div class="column four" style="height:100px">
  <div class="fill">.fill</div>
  <div>1</div>
</div>

Align child items

You can align child content left, center, right and justify. Put these classes on parent container.

.start
1
2
3
.center
1
2
3
.end
1
2
3
.justify
1
2
3
<div class="row five start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="row five center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="row five end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="row five justify">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

# Responsive

The main approach is mobile-first layout, using flexbox as main display. There are two kind of grid system by flexbox, it is row and column. Row is the parent of horizontaly child elements and Column is the vertically parent of children elements.

Container

Main grid container contains about 5 sizes grid-sm, grid-md, grid-lg, grid-xl and grid for fluid width.

Grid Classname <576px ≥576px ≥768px ≥960px ≥1200px
grid-sm 100% 576px 576px 576px 576px
grid-md 100% 100% 768px 768px 768px
grid-lg 100% 100% 100% 960px 960px
grid-xl 100% 100% 100% 100% 1200px
grid 100% 100% 100% 100% 100%

Responsive Row

We follow a mobile-first design. Put the number of columns for mobile as explained in the previous point. Then, when things get too stretched, add a column counter with screen classes sm, md, lg and xl. By default counter name is marked as xs.

.one .two-sm .three-md .four-lg .five-xl
1
2
3
4
5
6
7
8
9
10

Column number from previous section can be used to follow their parent in responsive design.

.one .two-sm .three-md .four-lg .five-xl
.sm-1
.sm-2
.lg-2 .md-3
.xl-3
.xs-3 .fill
<div class="row one two-sm three-md four-lg five-xl">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

<div class="row one two-sm three-md four-lg five-xl">
  <div class="sm-1">.sm-1</div>
  <div class="sm-2">.sm-2</div>
  <div class="lg-2 md-3">.lg-2 .md-3</div>
  <div class="xl-3">.xl-3</div>
  <div class="xs-3 fill">.xs-3 .fill</div>
</div>


# Typography

Hey font, you're so unique. why keeping we you restricted, feel free to explore or add external font. just put your font class on the body tag then you're done


Displays

Captivate your user with huge fonts

Display 1 .display-1 60px

Display 2 .display-2 54px

Display 3 .display-3 48px

<p class="display-1">Display 1</p>
<p class="display-2">Display 2</p>
<p class="display-3">Display 3</p>

Headings

Daily h1 to H6 style

Heading 1 H1 .h1 40px

Heading 2 H2 .h2 32px

Heading 3 H3 .h3 28px

Heading 4 H4 .h4 24px

Heading 5 H5 .h5 20px
Heading 6 H6 .h6 16px
<h1>Heading 1</h1> or <p class="h1">Heading 1</p>
<h2>Heading 2</h2> or <p class="h2">Heading 2</p>
<h3>Heading 3</h3> or <p class="h3">Heading 3</p>
<h4>Heading 4</h4> or <p class="h4">Heading 4</p>
<h5>Heading 5</h5> or <p class="h5">Heading 5</p>
<h6>Heading 6</h6> or <p class="h6">Heading 6</p>

Paragraph

Enough with heading, lets try paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. p .extra-large 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. p .large 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. p .medium 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. small .small 80%

<p class="extra-large">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
</p>
<p class="large">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
</p>
<p class="medium">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
</p>
<p class="small">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
</p>

Semantic Text

Another bunch of quote code

I18N abbr
Bold b
Citation cite
Hello world! code
Another hello!
pre
Delete del
Emphasis em
Italic i
Inserted ins
Ctrl + S kbd
Highlighted mark
Strikethrough s
Sample samp
Text Subscripted sub
Text Supscripted sup
time
Underline u
x = y + 2 var
<abbr title="Internationalization">I18N</abbr>
<b>Bold</b>
<cite>Citation</cite>
<code>Hello world!</code>
<pre class="inline">Another hello!</pre>
<del>Delete</del>
<em>Emphasis</em>
<i>Italic</i>
<ins>Inserted</ins>
<kbd>Ctrl + S</kbd>
<mark>Highlighted</mark>
<s>Strikethrough</s>
<samp>Sample</samp>
Text <sub>Subscripted</sub>
Text <sup>Supscripted</sup>
<time>20:00</time>
<u>Underline</u>
<var>x = y + 2 </var>

Blockquote

This is quote blockquote

from bla
<blockquote>
  <p>This is quote <span class="text-info">blockquote</span></p>
  <cite>from bla</cite>
</blockquote>

Lists

All list available

  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3
  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  3. list item 3
description list term 1
description list description 1
description list term 2
description list description 2
description list term 3
description list description 3
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2.1</li>
      <li>list item 2.2</li>
      <li>list item 2.3</li>
    </ul>
  </li>
  <li>list item 3</li>
</ul>
<ol>
  <li>list item 1</li>
  <li>list item 2
    <ol>
      <li>list item 2.1</li>
      <li>list item 2.2</li>
      <li>list item 2.3</li>
    </ol>
  </li>
  <li>list item 3</li>
</ol>
<dl>
  <dt>description list term 1</dt>
  <dd>description list description 1</dd>
  <dt>description list term 2</dt>
  <dd>description list description 2</dd>
  <dt>description list term 3</dt>
  <dd>description list description 3</dd>
</dl>

# Colors

Looking for background colors, lets try it.

Components Colors

.primary .secondary .info .success .warning .error
<span class="primary">.primary</span>
<span class="secondary">.secondary</span>
<span class="info">.info</span>
<span class="success">.success</span>
<span class="warning">.warning</span>
<span class="error">.error</span>

All Background Colors

Not enough? Here the complete set of background colors

.primary or .blue
.secondary or .purple
.info or .teal
.success or .green
.warning or .yellow
.error or .red
.muted or .gray
.navy
.aqua
.olive
.orange
.pink
.maroon
.white
.silver
.black
<span class="primary">.primary</span> or <span class="blue">.blue</span>
<span class="secondary">.secondary</span> or <span class="purple">.purple</span>
<span class="info">.info</span> or <span class="teal">.teal</span>
<span class="success">.success</span> or <span class="green">.green</span>
<span class="warning">.warning</span> or <span class="yellow">.yellow</span>
<span class="error">.error</span> or <span class="red">.red</span>
<span class="muted">.muted</span> or <span class="gray">.gray</span>
<span class="navy">.navy</span>
<span class="aqua">.aqua</span>
<span class="olive">.olive</span>
<span class="orange">.orange</span>
<span class="pink">.pink</span>
<span class="maroon">.maroon</span>
<span class="white text-black">.white</span>
<span class="silver text-black">.silver</span>
<span class="black">.black</span>

All Text Color Classes

Don't worry, we have the sets of text colors classes too.

.text-primary or .text-blue
.text-secondary or .text-purple
.text-info or .text-teal
.text-success or .text-green
.text-warning or .text-yellow
.text-error or .text-red
.text-muted or .text-gray
.text-navy
.text-aqua
.text-olive
.text-orange
.text-pink
.text-maroon
.text-white
.text-silver
.text-black
<span class="text-primary">.text-primary</span> or <span class="text-blue">.text-blue</span>
<span class="text-secondary">.text-secondary</span> or <span class="text-purple">.text-purple</span>
<span class="text-info">.text-info</span> or <span class="text-teal">.text-teal</span>
<span class="text-success">.text-success</span> or <span class="text-green">.text-green</span>
<span class="text-warning">.text-warning</span> or <span class="text-yellow">.text-yellow</span>
<span class="text-error">.text-error</span> or <span class="text-red">.text-red</span>
<span class="text-muted">.text-muted</span> or <span class="text-gray">.text-gray</span>
<span class="text-navy">.text-navy</span>
<span class="text-aqua">.text-aqua</span>
<span class="text-olive">.text-olive</span>
<span class="text-orange">.text-orange</span>
<span class="text-pink">.text-pink</span>
<span class="text-maroon">.text-maroon</span>
<span class="text-white gray">.text-white</span>
<span class="text-silver">.text-silver</span>
<span class="text-black">.text-black</span>

# Labels

Label is inline class to inform something more captivate to look inside any element.

Label default classes

To use label put class .label inside any inline elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. label .primary Duis quis sodales risus. Etiam euismod ornare consequat.

  • list item 1 .label .success
  • list item 2
    • list item 2.1 .label .secondary
    • list item 2.2 .label .info
    • list item 2.3
  • list item 3
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. 
  <span class="label">label .primary</span> Duis quis sodales risus. Etiam euismod ornare consequat. 
</p>
<ul>
  <li>list item 1 <span class="label success">.label .success</span> </li>
  <li>list item 2
    <ul>
      <li>list item 2.1 <span class="label secondary">.label .secondary</span> </li>
      <li>list item 2.2 <span class="label info">.label .info</span> </li>
      <li>list item 2.3</li>
    </ul>
  </li>
  <li>list item 3</li>
</ul>

# Buttons

Using button? simple Just use tag button and for a link or input just put class .button inside.
You can still use the coloring class from previous section or use class .link.

Default button classes

<button class="primary">.primary</button>
<button class="secondary">.secondary</button>
<button class="info">.info</button>
<button class="success">.success</button>
<button class="warning">.warning</button>
<button class="error">.error</button>
<button class="link">.link</button>
<button disabled>disabled</button>

Custom button for links or input

Turn default link or input type as button with .button classes

<a class="button">link .primary</a>
<a class="button secondary">link .secondary</a>
<a class="button info">link .info</a>
<a class="button success">link .success</a>
<input type="submit" class="warning" value="input warning" />
<input type="submit" class="error" value="input error" />
<input type="submit" class="link" value="input link" />
<input disabled type="submit" value="input disabled" />

Toggleable Buttons

It's posible too to turn button unto some toggle checkbox or add class .active

<label>
  <input type="checkbox" />
  <span class="toggle button">Toggle</span>
</label>
<label>
  <input type="checkbox" />
  <span class="toggle button secondary">Toggle</span>
</label>
<label>
  <input type="checkbox" />
  <span class="toggle button success">Toggle</span>
</label>
<label>
  <input type="checkbox" />
  <span class="toggle button info">Toggle</span>
</label>
<label>
  <input type="checkbox" />
  <span class="toggle button warning">Toggle</span>
</label>
<label>
  <input type="checkbox" />
  <span class="toggle button error">Toggle</span>
</label>
<label>
  <input type="checkbox" />
  <span class="toggle button link">Toggle</span>
</label>
<label>
  <input disabled type="checkbox" />
  <span disabled class="toggle button">Toggle</span>
</label>

Sizing Buttons

Use classes from paragraph typography, .extra-large, .large, .medium or .small




<button class="extra-large">button extra-large</button>
<button class="large">button large</button>
<button>button (default)</button>
<button class="small">button small</button>

# Tables

Tables include default styles for tables and data sets.

Default Table Styles

Default table are .condensed and .hovered.

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Genre</th>
      <th>Release date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
    <tr>
      <td>The Godfather</td>
      <td>Crime, Drama</td>
      <td>24 March 1972</td>
    </tr>
    <tr>
      <td>Schindler`s List</td>
      <td>Biography, Drama, History</td>
      <td>4 February 1994</td>
    </tr>
    <tr>
      <td>Se7en</td>
      <td>Crime, Drama, Mystery</td>
      <td>22 September 1995</td>
    </tr>
  </tbody>
</table>

Customize Table Styles

To increase table padding size, use .table-lg or .table-xl .


.table-lg
Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

.table-xl
Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

To turn hover off put .nohover on the table tag.

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

Add striped background with .striped.

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

# Forms

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

Form Input

<label>Input Text</label>
<input type="text" placeholder="Input Text">
<label>Input Password</label>
<input type="password" placeholder="Input Password">
<label>Input Email</label>
<input type="email" placeholder="Input Email">
<label>Input Number</label>
<input type="number" placeholder="Input Number">
<label>Input Color</label>
<input type="color"/>
<label>Input Date</label>
<input type="date"/>
<label>Input Range</label>
<input type="range"/>
<label>Input File</label>
<input type="file"/>

Form Textarea

<label>Textarea</label>
<textarea placeholder="Textarea Message"></textarea>

Form Radio


<label>
  <input type="radio" name="radiodemo">
  <span class="checkable">Select me</span>
</label>
<br>
<label>
  <input type="radio" name="radiodemo" checked>
  <span class="checkable">Or me</span>
</label>

Form Checkbox


<label>
  <input type="checkbox" name="">
  <span class="checkable">Select me</span>
</label>
<br>
<label>
  <input type="checkbox" checked>
  <span class="checkable">Select me too</span>
</label>

Form Select

<label>Select an option</label>
<select>
  <optgroup label="Select one">
    <option>Select A</option>
    <option>Select B</option>
    <option>Select C</option>
    <option>Select D</option>
  </optgroup>
</select>
<label>Select multiple options</label>
<select multiple>
  <option>Select A</option>
  <option>Select B</option>
  <option>Select C</option>
  <option>Select D</option>
  <option>Select D</option>
</select>

Form Search

Selected ×
Selected ×
Selected ×
<label>Select an option</label>
<div class="input" contenteditable>
  <div class="label maroon" contenteditable="false">
    <img alt=""> Selected <span class="close">&times;</span>
  </div>
  <div class="label maroon" contenteditable="false">
    <img alt=""> Selected <span class="close">&times;</span>
  </div>
  <div class="label maroon" contenteditable="false">
    <img alt=""> Selected <span class="close">&times;</span>
  </div>
</div>

Form Example

Contact Form box


<form class="row gap one two-md">
  <div>
    <label>Fullname</label>
    <input placeholder="Full name">
    <label>Email</label>
    <input type="email" placeholder="Email">   
    <label>Upload file</label>
    <input type="file">   
    <label>Select an option</label>
    <select>
      <optgroup label="Select one">
        <option>Select A</option>
        <option>Select B</option>
        <option>Select C</option>
        <option>Select D</option>
      </optgroup>
    </select>
  </div>
  <div class="md-2 p-0">
    <label>Message</label>
    <textarea placeholder="Message"></textarea>
  </div>
  <div>
    <label>
      <input type="checkbox" checked>
      <span class="checkable">Agree</span>
    </label>
    <br>
    <input type="reset" value="Clear" class="silver text-black">
    <input type="submit" value="Submit">
  </div>
</form>

# Accordion

Bla bla

Pure CSS Accordion

Yes, it is possible to enable accordion effect using only pure CSS script with radio inputs hack. However the markup will not look so pretty, but it works. Just try it ;D

Accordion Content A

Accordion Content B

Accordion Content C

HTML Markup
<div class="accordion">.
  <div>
    <input type="radio" name="accordion" id="accordion-1" checked>
    <label for="accordion-1" class="text-maroon">Accordion A</label>
    <section>
      <p>
        Accordion Content A
      </p>
    </section>
  </div>
  <div>
    <input type="radio" name="accordion" id="accordion-2">
    <label for="accordion-2" class="text-maroon">Accordion B</label>
    <section>
      <p>
        Accordion Content B
      </p>
    </section>
  </div>
  <div>
    <input type="radio" name="accordion" id="accordion-3">
    <label for="accordion-3" class="text-maroon">Accordion C</label>
    <section>
      <p>
        Accordion Content C
      </p>
    </section>
  </div>
</div>

JS Accordion

Too lazy setting each ids in label form? If javascript is possible for you, all it need only put .active class inside direct children from accordion class. See example script below.

Accordion A

Accordion Content A

Accordion B

Accordion Content B

Accordion C

Accordion Content C

HTML Markup
<div class="accordion">
  <div class="active">
    <a class="text-maroon" data-accordion>Accordion A</a>
    <section>
      <p>
        Accordion Content A
      </p>
    </section>
  </div>
  <div>
    <a class="text-maroon" data-accordion>Accordion B</a>
    <section>
      <p>
        Accordion Content B
      </p>
    </section>
  </div>
  <div>
    <a class="text-maroon" data-accordion>Accordion C</a>
    <section>
      <p>
        Accordion Content C
      </p>
    </section>
  </div>
</div>
Vanilla JS 
var accordions=document.querySelectorAll('[data-accordion]');
for(var i=accordions.length; i-- > 0;){
  // Add click listener each element that has data-accordion
  accordions[i].addEventListener('click',function(ev){
    var target=this.parentNode,
        siblings=target.parentNode.children;
    // Set all inactive
    for(var i=siblings.length;i-->0;){
      siblings[i].classList.remove('active')
    }
    // Set current as active
    target.classList.add('active')
  })
}

# Avatar

Bla bla

Basic Avatar

Avatar circling the image, resize this using font class as well .small, .large, .extra-large.


.avatar.small

.avatar

.avatar.large

.avatar.extra-large
HTML Markup
<img src="/src/img/avatar.png" class="avatar small">
<img src="/src/img/avatar.png" class="avatar">
<img src="/src/img/avatar.png" class="avatar large">
<img src="/src/img/avatar.png" class="avatar extra-large">

# Badge

Bla bla

Basic Badge

Add small pointing labels over top-right element using .badge class.

Notification

HTML Markup
<span class="badge" data-badge="">
  Notification
</span>
<br>
<button class="badge" data-badge="50">
  Badge
</button>
<br>
<span class="badge avatar extra-large" data-badge="80">
  <img src="/src/img/avatar.png">
</span>
<span class="badge avatar large" data-badge="80">
  <img src="/src/img/avatar.png">
</span>
<span class="badge avatar" data-badge="80">
  <img src="/src/img/avatar.png">
</span>
<span class="badge avatar small" data-badge="80">
  <img src="/src/img/avatar.png">
</span>       


# Cards

Cards are flexible content containers.

Basic Card

Add a container element with the card class. Child element is semantic html tags, header, section and footer. The image can be placed in any position.


This is a nice forest. What do you want to do with it?

Header

Content.. Lorem ipsum dolor sit amet, consectetur adipiscing elit
Footer!

Can be collapsed too..
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...

HTML Markup
<article class="card">
  <img src="/src/img/forest.jpg">
  <p>This is a nice forest. What do you want to do with it?</p>
</article>

<article class="card">
  <header>
    <h3>Header</h3>
  </header>
  <section>Content.. Lorem ipsum dolor sit amet, consectetur adipiscing elit</section>
  <footer>
    Footer!
  </footer>
</article>

<input type="checkbox" id="cardtoggle">
<article class="card">
  <p>Can be collapsed too..<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
  <label for="cardtoggle" class="close">&times;</label>
</article>


# Collapse





# Steps

Steps are progress indicators of a sequence of task steps.

Basic Steps

HTML Markup

# Tabs

Bla bla

Pure CSS Tabs

Just like Accordion did, tabs are radioable. You can put button toggle anywhere outside tabs container using label for but the indicator wont show up nicely there.

This is content Tab 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

This is content Tab 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

This is content Tab 3.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

HTML Markup
<div class="tabs">
  <input type="radio" name="tab" id="tab-1" checked>
  <input type="radio" name="tab" id="tab-2">
  <input type="radio" name="tab" id="tab-3">
  <div class="indicators">
    <label for="tab-1">Tab1</label>
    <label for="tab-2">Tab2</label>
    <label for="tab-3">Tab3</label>
  </div>
  <section>
    <article>
      <p>This is content Tab 1. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
    </article>
    <article>
      <p>This is content Tab 2. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
    </article>
    <article>
      <p>This is content Tab 3. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
    </article>
  </section>
</div>

JS Tabs

This framework mainly focuses on how well it looks on any frontend JS framework without adding complex dependency of external JS. If you like to use simple JS to toggle anything just use .active. Again, see example below.

This is content Tab 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

This is content Tab 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

This is content Tab 3.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

HTML Markup
<div class="tabs">
  <div class="indicators">
    <a data-tab class="active">Tab1</a>
    <a data-tab>Tab2</a>
    <a data-tab>Tab3</a>
  </div>
  <section>
    <article class="active">
      <p>This is content Tab 1. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
    </article>
    <article>
      <p>This is content Tab 2. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
    </article>
    <article>
      <p>This is content Tab 3. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
    </article>
  </section>
</div>
Vanilla JS
var tabs=document.querySelectorAll('[data-tab]');
for(var i=tabs.length;i-->0;){
  // Add click listener each element that has data-tab
  tabs[i].addEventListener('click',function(ev){
    var target=this.parentNode,
        indicators=target.children,
        index=Array.prototype.indexOf.call(indicators,this),
        contents=target.parentNode.querySelector('section').children;
    // Set all indicator and content as inactive
    for(var i=0;i<contents.length;i++){
      indicators[i].classList.remove('active')
      contents[i].classList.remove('active')
    }
    // Set current target index as active
    indicators[index].classList.add('active')
    contents[index].classList.add('active')
  })    
}

# Tiles

Bla bla

Basic Tile

Title of the current tile

This is a nice forest. What do you want to do with it?

Compact version of tile using class .tile.compact

This is a nice forest. What do you want to do with it?
Description

HTML Markup
<article class="tile">
  <img src="/src/img/avatar.png" class="avatar small">
  <section>
    <h4>Title of the current tile</h4>
    This is a nice forest. What do you want to do with it?
  </section>
  <div class="action small nowrap">
    <button class="p-1">Join</button>
    <button class="p-1 info">Contact</button>
  </div>
</article>

<article class="tile compact">
  <img src="/src/img/avatar.png" class="avatar small">
  <section>
    <p>
      This is a nice forest. What do you want to do with it?
      <br>
      <span class="text-muted">Description</span>
    </p>
  </section>
  <div class="action">
    <button class="p-0 px-1 m-0 link">&vellip;</button>
  </div>
</article>

Complex Tiles

Title

This is a nice forest. What do you want to do with it?

Title

This is a nice forest. What do you want to do with it?

Title

This is a nice forest. What do you want to do with it?
HTML Markup
<article class="tile">
  <img src="/src/img/avatar.png" class="avatar small">
  <section>
    <h4>Title</h4>
    <p>This is a nice forest. What do you want to do with it?</p>
    <footer class="small">
      <button>Reply</button>
      <button class="info">Rate</button>
    </footer>
    <article class="tile">
      <img src="/src/img/avatar.png" class="avatar small">
      <section>
        <h4>Title</h4>
        This is a nice forest. What do you want to do with it?
      </section>
    </article>
    <article class="tile">
      <div>
        <img src="/src/img/avatar.png" class="avatar small">
      </div>
      <section>
        <h4>Title</h4>
        This is a nice forest. What do you want to do with it?
      </section>
    </article>
  </section>
</article>

# Toasts

Basic Toasts

Default Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Primary Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Info Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Success Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Warning Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Error Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

# Tooltip

Tooltip

HTML Markup
<button data-tooltip="This is a great tooltip" class="tooltip-top">
  Top
</button>
<button data-tooltip="This is a great tooltip">
  Bottom (default)
</button>
<button data-tooltip="This is a great tooltip" class="tooltip-left">
  Left
</button>
<button data-tooltip="This is a great tooltip" class="tooltip-right">
  Right
</button>

# Tree

Pure CSS Trees

HTML Markup
<nav>
  <ul class="tree">
    <li>
      <input type="checkbox" id="list-1">
      <label for="list-1">List 1</label>
      <ul>
        <li>List 1.1</li>
        <li>List 1.1</li>
        <li>List 1.1</li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="list-2">
      <label for="list-2">List 2</label>
      <ul>
        <li>
        <input type="checkbox" id="list-2-1">
        <label for="list-2-1">List 2</label>
        <ul>
          <li>List 2.1.1</li>
          <li>List 2.1.1</li>
          <li>List 2.1.1</li>
        </ul>
        </li>
        <li>List 2.1</li>
        <li>List 2.1</li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="list-3">
      <label for="list-3">List 3</label>
      <ul>
        <li>List 3.1</li>
        <li>List 3.1</li>
        <li>List 3.1</li>
      </ul>
    </li>
  </ul>
  </nav>

JS Trees

HTML Markup
<nav>
  <ul class="tree">
    <li class="active">
      <a data-tree>List 1</a>
      <ul>
        <li>List 1.1</li>
        <li>List 1.1</li>
        <li>List 1.1</li>
      </ul>
    </li>
    <li>
      <a data-tree>List 2</a>
      <ul>
        <li>
          <a data-tree>List 2</a>
          <ul>
            <li>List 2.1.1</li>
            <li>List 2.1.1</li>
            <li>List 2.1.1</li>
          </ul>
        </li>
        <li>List 2.1</li>
        <li>List 2.1</li>
      </ul>
    </li>
    <li>
      <a data-tree>List 3</a>
      <ul>
        <li>List 3.1</li>
        <li>List 3.1</li>
        <li>List 3.1</li>
      </ul>
    </li>
  </ul>
</nav>
Vanilla JS
var trees=document.querySelectorAll('[data-tree]');
for(var i=trees.length;i-->0;){
  // Add click listener each element that has data-accordion
  trees[i].addEventListener('click',function(ev){
    var target=this.parentNode,
        siblings=target.parentNode.children;        
    // Toggle class element active
    target.classList.toggle('active')
  })
}