Famous UI | Information Cards Two Rows

<section class="py-5 mb-4">
    <div class="fui-container px-1">
      <div class="row">

        <!-- fui-card -->
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
          <div class="fui-card mb-2">
            <div class="fui-card-body block-1">
              <h3 class="fui-card-title h4 weight-600">Special title</h3>
              <p class="fui-card-text text-muted">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
        </div>

        <!-- fui-card -->
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
          <div class="fui-card mb-2">
            <div class="fui-card-body block-2">
              <h3 class="fui-card-title h4 weight-600">Special title</h3>
              <p class="fui-card-text text-muted">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
        </div>

        <!-- fui-card -->
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
          <div class="fui-card mb-2">
            <div class="fui-card-body block-3">
              <h3 class="fui-card-title h4 weight-600">Special title</h3>
              <p class="fui-card-text text-muted">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- fui-card -->
      <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
          <div class="fui-card mb-2">
            <div class="fui-card-body block-4">
              <h3 class="fui-card-title h4 weight-600">Special title</h3>
              <p class="fui-card-text text-muted">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
        </div>

        <!-- fui-card -->
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
          <div class="fui-card mb-2">
            <div class="fui-card-body block-5">
              <h3 class="fui-card-title h4 weight-600">Special title</h3>
              <p class="fui-card-text text-muted">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
        </div>

        <!-- fui-card -->
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
          <div class="fui-card mb-2">
            <div class="fui-card-body block-6">
              <h3 class="fui-card-title h4 weight-600">Special title</h3>
              <p class="fui-card-text text-muted">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
        </div>


      </div>
    </div>
  </section>

Dependencies

CSS

Insert before the closing </head> tag

<!-- Icon Famous -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/icon-famous/1.0.0-beta.2/iconfamous.css">
<!-- Famous UI -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.css">

Javascript

Insert before the closing </body> tag

<!-- jQuery -->
<script src="https://cdn.boomcdn.com/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Famous UI -->
<script src="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.js"></script>

Information Cards Two Rows Cards

Dependencies

CSS

Javascript

Tags