Menú

Filetes

Distintas variantes de bordes para identificar las submarcas y destacar elementos.

Contenido

Filete simple

Filete simple

Filete simple para un elemento contenedor cualquiera, se usa mediante la combinación de la clase .ruler que es la clase base que usa $grey como color base con alguna de las siguientes clases.

Colores

.ruler

.ruler--primary

.ruler--secondary

.ruler--alumni

.ruler--x

.ruler--ri

.ruler--corporate

.ruler--media

<div class="row">
  <div class="col-md-6">
    <div class="ruler xx-grid-block"></div>
  </div>
  <div class="col-md-6">
    <div class="ruler ruler--primary"></div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="ruler ruler--secondary"></div>
  </div>
  <div class="col-md-6">
    <div class="ruler ruler--alumni"></div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="ruler ruler--x"></div>
  </div>
  <div class="col-md-6">
    <div class="ruler ruler--ri"></div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="ruler ruler--corporate"></div>
  </div>
  <div class="col-md-6">
    <div class="ruler ruler--media"></div>
  </div>
</div>

Tamaños

.ruler

.ruler--thin

<div class="row">
  <div class="col-md-12">
    <div class="ruler"></div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="ruler ruler--thin"></div>
  </div>
</div>

Subir