Sertxu Design

Section under construction

Buttons

Primary Buttons

<button type="button" class="btn btn-primary btn-smalt">Smalt</button>
<button type="button" class="btn btn-primary btn-coral">Coral</button>
<button type="button" class="btn btn-primary btn-success">Success</button>
<button type="button" class="btn btn-primary btn-warning">Warning</button>
<button type="button" class="btn btn-primary btn-light">Light</button>
<button type="button" class="btn btn-primary btn-dark">Dark</button>

Secondary Buttons

<button type="button" class="btn btn-secondary btn-smalt">Smalt</button>
<button type="button" class="btn btn-secondary btn-coral">Coral</button>
<button type="button" class="btn btn-secondary btn-success">Success</button>
<button type="button" class="btn btn-secondary btn-warning">Warning</button>
<button type="button" class="btn btn-secondary btn-light">Light</button>
<button type="button" class="btn btn-secondary btn-dark">Dark</button>

Tertiary Buttons

<button type="button" class="btn btn-tertiary btn-smalt">Smalt</button>
<button type="button" class="btn btn-tertiary btn-coral">Coral</button>
<button type="button" class="btn btn-tertiary btn-success">Success</button>
<button type="button" class="btn btn-tertiary btn-warning">Warning</button>
<button type="button" class="btn btn-tertiary btn-light">Light</button>

Labeling

Metadata

<div class="metadata">
  <i class="fa fa-clock-o"></i>
  <span>30 Mayo 2018</span>
</div>

<div class="metadata">
  <i class="fa fa-eye"></i>
  <span>109</span>
</div>

<div class="metadata">
  <i class="fa fa-thumb-up"></i>
  <span>3281</span>
</div>

<div class="metadata">
  <i class="fa fa-download"></i>
  <span>43294</span>
</div>

Tags

<div class="small">
  <a href="#">Off Topic</a>
</div>

<div class="small">
  <a href="#">Servers</a>
</div>

<div class="small">
  <a href="#">News</a>
</div>

Badges

<div class="badges">
  <a class="badge" href="#">Default</a>
  <a class="badge badge-smalt" href="#">Smalt</a>
  <a class="badge badge-coral" href="#">Coral</a>
  <a class="badge badge-success" href="#">Success</a>
  <a class="badge badge-warning" href="#">Warning</a>
  <a class="badge badge-light" href="#">Light</a>
  <a class="badge badge-dark" href="#">Dark</a>
</div>

Custom Components

Pagination

<ul class="pagination" role="navigation">
  <li class="page-item" aria-label="« Anterior">
    <a class="page-link" href="#" rel="prev" aria-label="« Anterior">‹</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item active" aria-current="page">
    <span class="page-link">3</span>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#" rel="next" aria-label="Siguiente »">›</a>
  </li>
</ul>

Share Group

<div class="share-group dropup">
  <button type="button" class="share-btn btn-primary btn btn-smalt" data-toggle="dropdown" aria-haspopup="false"
          aria-expanded="false">
    <i class="fa fa-share-alt"></i>
  </button>
  <div class="dropdown-menu">
    <div class="row">
      <a href="#"
        class="social-btn btn-primary btn btn-smalt effect">
        <i class="fa fa-twitter"></i>
      </a>
    </div>
    <div class="row">
      <a href="#" class="social-btn btn-primary btn btn-smalt effect">
        <i class="fa fa-facebook"></i>
      </a>
    </div>
    <div class="row">
      <a class="social-btn btn-primary btn btn-smalt effect">
        <i class="fa fa-clipboard"></i>
      </a>
    </div>
  </div>
</div>

Forms

Floating label

<div class="form-label-group">
  <input type="text" id="exampleForm1" name="exampleForm1" class="form-control" placeholder="Name">
  <label for="exampleForm1">Name</label>
</div>

Dark Theme & Floating label

<div class="form-dark-style">
  <div class="form-label-group">
    <input type="text" id="exampleForm2" name="exampleForm2" class="form-control" placeholder="Name">
    <label for="exampleForm2">Name</label>
  </div>
</div>

Validation & Floating label

<div class="form-label-group">
  <input type="email" id="exampleForm3" name="exampleForm3" class="form-control validate" placeholder="Email" value="example">
  <label for="exampleForm3">Email</label>
</div>

Validation & Dark Theme & Floating label

<div class="form-dark-style">
  <div class="form-label-group">
    <input type="email" id="exampleForm4" name="exampleForm4" class="form-control validate" placeholder="Email" value="example">
    <label for="exampleForm4">Email</label>
  </div>
</div>

Checkbox

<div class="checkbox">
  <label class="checkbox-container">
    Example custom checkbox
    <input type="checkbox" name="exampleForm5">
    <span class="checkmark"></span>
  </label>
</div>

Switch

Example custom switch
<div class="switch-container">
  <label class="switch">
    <input type="checkbox" name="exampleForm6">
    <span class="slider round"></span>
  </label>
  <span>Example custom switch</span>
</div>

Questo sito web utilizza i cookie per fornire un'esperienza migliore ai nostri visitatori, per conoscere la politica sulla privacy clicca qui