johnrees/fablabs

<div class="text-center my-3">
  <%= title t("shared.styleguide") %> 
</div>

<div class="container">
  <h3 class="text-center">Normal container</h3>

  <div class="row">
    <div class="col mb-5">
      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
      <p>Paragraph</p>
      <small>small</small>
      <br>
      <strong>strong</strong>
      <br>
      <%= link_to "link text...", "/" %>
      <br>
      <span class="text-large">text-large</span>
      <br>
      <span class="text-small">text-small</span>
      <br>
      <span class="text-primary">text-primary</span>
      <p class="text-red-1">text-red-1</p>
      <p class="text-red-2">text-red-2</p>
      <p class="text-red-3">text-red-3</p>

      <h4 class="text-center">Icons</h4>

      <p>zoom10+</p>
      <div class="zoom10 d-flex justify-content-between">
        <div>
          <small>icon_active</small>
          <div class="icon_custom icon_active mx-auto"> </div>
        </div>
        <div>
          <small>icon_closed</small>
          <div class="icon_custom icon_closed mx-auto"> </div>
        </div>
        <div>
          <small>icon_fab_lab</small>
          <div class="icon_custom icon_fab_lab mx-auto"> </div>
        </div>
        <div>
          <small>icon_mobile</small>
          <div class="icon_custom icon_mobile mx-auto"> </div>
        </div>
        <div>
          <small>icon_supernode</small>
          <div class="icon_custom icon_supernode mx-auto"> </div>
        </div>
        <div>
          <small>icon_corona</small>
          <div class="icon_custom icon_corona mx-auto"> </div>
        </div>
      </div>

      <div class="zoom4 mt-4">
        <small>zoom4+</small>
        <div class="icon_custom icon_fab_lab"> </div>
      </div>
      <div class="mt-4">
        <small>no zoom</small>
        <div class="icon_custom icon_fab_lab"> </div>
      </div>
    </div>

    <div class="col">
      <h4>Buttons</h4>
      <div class="mb-4">
        <button class="btn btn-default">btn-default</button>
        <button class="btn btn-default shadow"> shadow</button>
      </div>
      <div class="mb-4">
        <button class="btn btn-primary">btn-primary</button>
        <button class="btn btn-primary shadow">shadow</button>
      </div>
      <div class="mb-4">
        <button class="btn btn-outline-primary">btn-outline-primary</button>
        <button class="btn btn-outline-primary shadow">shadow</button>
      </div>
      <div class="mb-4">
        <button class="btn btn-secondary">btn-secondary</button>
        <button class="btn btn-secondary shadow"> shadow</button>
      </div>
      <div class="mb-4">
        <button class="btn btn-outline-secondary">btn-outline-secondary</button>
        <button class="btn btn-outline-secondary shadow">shadow</button>
      </div>

      <h4 class="mt-5">List</h4>
      <div class="homepage-divider ml-0"></div>
      <ul class="homepage-features-list list-unstyled">
        <li>first</li>
        <li>second</li>
      </ul>
         </div>
  </div>

  <h2 class="text-center">Cards</h2>

  <div class="row row-cols-2">
    <div class="col">
      <div class="card shadow">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 3</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid mt-5">
  <h2 class="text-center">Fluid container</h2>
  <h4>Columns</h4>
  <div class="row row-cols-3">
    <div class="col border">column 1</div>
    <div class="col border bg-primary">column 2 bg-primary</div>
    <div class="col border">column 3</div>
    <div class="col border">column 4</div>
    <div class="col border">column 5</div>
  </div>
</div>