# Elements

---
## Toggle Switch

<label class="switch">
  <input type="checkbox">
  <span class="switch-slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="switch-slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="switch-slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="switch-slider round"></span>
</label>

```html
<label class="switch">
  <input type="checkbox">
  <span class="switch-slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="sswitch-lider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="switch-slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="switch-slider"></span>
</label>

```
<div class="grid">
  <div class="row col-gapless">
    <div class="column">
      <label>Email</label>
    </div>
    <div class="column">
      <label class="switch">
        <input type="checkbox" checked>
        <span class="switch-slider"></span>
      </label>
    </div>
  </div>

  <div class="row col-gapless">
    <div class="column">
      <label>Email</label>
    </div>
    <div class="column">
      <label class="switch">
        <input type="checkbox" checked>
        <span class="switch-slider"></span>
      </label>
    </div>
  </div>

  <div class="row col-gapless">
    <div class="column">
      <label>Email</label>
    </div>
    <div class="column">
      <label class="switch">
        <input type="checkbox" checked>
        <span class="switch-slider"></span>
      </label>
    </div>
  </div>
</div>

## Button

Apply `btn` class to `<button />` element, it will apply basic color and styling for a button.

```html
<button class="btn">Button</button>
```
<p>
    <button class="btn">Button</button>
    <button class="btn">Button</button>
    <button class="btn">Button</button>
    <button class="btn">Button</button>
</p>

Apply `btn btn-primary` class to `<button />` element, it will apply `primary` color and styling for a button. You can change the variable `$primary-color` to your expected color.

```html
<button class="btn btn-primary">Button</button>
```
This is default theme button:
<div class="default">
    <button class="btn btn-primary">Button</button>
</div>

### Button sizes

```html
<button class="btn btn-lg">large button</button>
<button class="btn btn-sm">small button</button>

<button class="btn btn-primary btn-lg"> large</button>
<button class="btn btn-primary"> normal</button>
<button class="btn btn-primary btn-sm"> small</button>

<button class="btn btn-block">full width block button</button>
```
<p>
  <button class="btn btn-lg">large button</button>
  <button class="btn btn-sm">small button</button>

  <button class="btn btn-primary btn-lg">large</button>
  <button class="btn btn-primary">normal</button>
  <button class="btn btn-primary btn-sm">small</button>
</p>

Here are the example of `jackpotjoy`, `monopoly`, `starspins`, `heartbingo`, `virgingames` ventures theme button.

<div class="d-inline-flex bg-dark p-spacing offer-ui">
  <div class="jackpotjoy">
      <button class="btn btn-primary">jackpotjoy</button>
  </div>

  <div class="monopoly">
      <button class="btn btn-primary">monopoly</button>
  </div>

  <div class="starspins">
      <button class="btn btn-primary">starspins</button>
  </div>

  <div class="heartbingo">
      <button class="btn btn-primary">heartbingo</button>
  </div>

  <div class="virgingames">
      <button class="btn btn-primary">virgingames</button>
  </div>
</div>

```scss
// Jackpotjoy

.btn.btn-primary {
    font-size: 24px;
    font-family: "futura-pt-bold", sans-serif;
    min-width: 180px;
    min-height: 1.8rem;
    font-weight: bold;
    line-height: 1rem;
    height: 2.4rem;
    text-transform: uppercase;
    margin: 0.4rem;
    background: #FFFFFF;
    border-radius: 0;
    border-color: #FFFFFF;
    color: #F53E7D;
}
```

---

## Typography

### Headings

```html
<h6>Heading 6</h6>
<h5>Heading 1</h5>
<h4>Heading 1</h4>
<h3>Heading 1</h3>
<h2>Heading 1</h2>
<h1>Heading 1</h1>
```
<div class="default">
    <h6>Heading 6</h6>
    <h5>Heading 5</h5>
    <h4>Heading 4</h4>
    <h3>Heading 3</h3>
    <h2>Heading 2</h2>
    <h1>Heading 1</h1>
</div>

---

### Paragraphs

```html
<p>Simply put some paragraphs in here to <strong>show</strong> what does it look like!</p>
<p>This is another paragraphs in here to <strong>show</strong> what does it look like!</p>
```

<p>Simply put some paragraphs in here to <strong>show</strong> what does it look like!</p>
<p>This is another paragraphs in here to <strong>show</strong> what does it look like!</p>

### Labels
```html
<p>Simply put some <span class="label label-primary">labels</span> in here to show what does it look like!</p>
<p>This is another <span class="label label-primary">labels</span> in here to show what does it look like!</p>
```
<p>Simply put some <span class="label label-primary">labels</span> in here to show what does it look like!</p>
<p>This is another <span class="label label-primary">labels</span> in here to show what does it look like!</p>

---
### Text Colors

```scss
@include text-color-variant(".text-primary", $primary-color);
@include text-color-variant(".text-secondary", $secondary-color-dark);
@include text-color-variant(".text-gray", $gray-color);
@include text-color-variant(".text-light", $light-color);
@include text-color-variant(".text-success", $success-color);
@include text-color-variant(".text-warning", $warning-color);
@include text-color-variant(".text-error", $error-color);
```

```html
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-gray">.text-gray</p>
<p class="text-light">.text-light</p>
<p class="text-success">.text-success</p>
<p class="text-warning">.text-warning</p>
<p class="text-light bg-primary">.text-light</p>
<p class="text-error">.text-error</p>
```

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-gray">.text-gray</p>
<p class="text-light">.text-light</p>
<p class="text-success">.text-success</p>
<p class="text-warning">.text-warning</p>
<p class="text-light bg-primary">.text-light</p>
<p class="text-error">.text-error</p>

---

### Background color

```scss
@include bg-color-variant(".bg-primary", $primary-color);
@include bg-color-variant(".bg-secondary", $secondary-color);
@include bg-color-variant(".bg-dark", $dark-color);
@include bg-color-variant(".bg-gray", $bg-color);
@include bg-color-variant(".bg-success", $success-color);
@include bg-color-variant(".bg-warning", $warning-color);
@include bg-color-variant(".bg-error", $error-color);
@include bg-color-variant(".bg-transparent", transparent);
```

<p class="bg-primary">.bg-primary</p>
<p class="bg-secondary">.bg-secondary</p>
<p class="bg-gray">.bg-gray</p>
<p class="bg-light">.bg-light</p>
<p class="bg-success">.bg-success</p>
<p class="bg-warning">.bg-warning</p>
<p class="bg-light bg-primary">.bg-light</p>
<p class="bg-error">.bg-error</p>

---

## Lists

```html
<!-- unordered list -->
<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>

<!-- description list -->
<dl>
  <dt>description list term</dt>
  <dd>description list description</dd>
</dl>
```
---

## Tables

```html
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Game</th>
      <th>Price</th>
      <th>Start Date</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>Jin's slot game</td>
      <td>£1000</td>
      <td>14th Oct 2017</td>
    </tr>
    <tr>
      <td>Banghai slot game</td>
      <td>£2000</td>
      <td>14th Jan 2018</td>
    </tr>
        <tr>
      <td>Double Bubble slot game</td>
      <td>£3000</td>
      <td>14th June 2017</td>
    </tr>
  </tbody>
</table>
```

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Game</th>
      <th>Price</th>
      <th>Start Date</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>Jin's slot game</td>
      <td>£1000</td>
      <td>14th Oct 2017</td>
    </tr>
    <tr>
      <td>Banghai slot game</td>
      <td>£2000</td>
      <td>14th Jan 2018</td>
    </tr>
        <tr>
      <td>Double Bubble slot game</td>
      <td>£3000</td>
      <td>14th Jun 2017</td>
    </tr>
  </tbody>
</table>