Lehigh Clutch Style Guide

Stat 

<div class="stats-wrapper">
    <div class="stats-icon">
        <i class="far fa-acorn"></i>
    </div><!-- end stats-icon -->
    <h3 class="stat">
        Stat
    </h3>
    <div class="stats-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div><!-- end stats-description -->
    <div class="stats-button">
        <a href="#" class="btn btn-primary dark-grey" role="button">
            <span class="button_text">Action Button</span>
            <span class="arrow fal fa-chevron-right"></span>
        </a>
    </div><!-- end stats-button -->
</div><!-- end stats-wrapper -->
 
<div class="stats-wrapper">
  <div class="stats-icon">
    {% block stat_icon %}
      <i class="{{ stat_icon }}"></i>
    {% endblock stat_icon %}
  </div><!-- end stats-icon -->
  <h3 class="stat">
    {% block stat_heading %}
      {{ statistic }}
    {% endblock stat_heading %}
  </h3>
  <div class="stats-description">
    {% block stat_description %}
      {{ description }}
    {% endblock stat_description %}
  </div><!-- end stats-description -->
  <div class="stats-button">
    {% block buttons %}
      {% for button in buttons %}
        {% include "@a_tag" with button only %}
      {% endfor %}
    {% endblock buttons %}
  </div><!-- end stats-button -->
</div><!-- end stats-wrapper -->
 
{
  "stat_icon": "far fa-acorn",
  "statistic": "Stat",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "buttons": {
    "1": {
      "text": "Action Button",
      "url": "#",
      "color": "dark-grey"
    }
  }
}
  • Content: 
    .stats-wrapper {
  height: 400px;
  width: 250px !important;
  padding: $space_three_quarter;
  background-color: $accent_color;
  background-color: var(--accent_color, $accent_color);
  background-image: linear-gradient($white, $accent_color);
  background-image: linear-gradient(var(--white, $white), var(--accent_color, $accent_color));
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  @media (max-width: 400px) {
    width: 200px !important;
  }

  .color-scheme-dark & {
    background-image: linear-gradient($dark_mode_grey, $accent_color);
    background-image: linear-gradient(var(--dark_mode_grey, $dark_mode_grey), var(--accent_color, $accent_color));
  }

  .accent-lehigh_brown &,
  .accent-blue_k60 & {
    color: $white;
    color: var(--white, $white);
    background-image: linear-gradient($grey_darkest, $accent_color);
    background-image: linear-gradient(var(--grey_darkest, $grey_darkest), var(--accent_color, $accent_color));

  }

  .stats-icon {
    font-size: 5rem;

    .color-scheme-dark & {
      color: $white;
      color: var(--white, $white);
    }
  }

  .stat {
    font-size: 2rem;
    margin: 0;
    text-align: center;

    .color-scheme-dark & {
      color: $base_font;
      color: var(--base_font, $base_font);
    }

    .accent-lehigh_brown &,
    .accent-blue_k60 & {
      .color-scheme-dark & {
        color: $white;
        color: var(--white, $white);
      }
    }
  }

  .stats-description {
    text-align: center;
    margin: $spacer 0;

    .color-scheme-dark & {
      color: $base_font;
      color: var(--base_font, $base_font);
    }

    .accent-lehigh_brown &,
    .accent-blue_k60 & {
      .color-scheme-dark & {
        color: $white;
        color: var(--white, $white);
      }
    }
  }

  .stats-button {
    .btn {
      background-color: $grey_darkest !important;
      border: 1px solid $grey_darkest !important;
      color: $white;

      &:hover,
      &:focus {
        color: $grey_darkest !important;
        background-color: $white !important;
      }
    }
  }
}

.right-content {
  .stats-section {
    padding: $space-two;

    .c-stats-slider {
      .slick-prev {
        left: -20px;
      }

      .slick-next {
        right: -20px !important;
      }
    }

    .slick-slide {
      left: 0;

      > div {
        width: 100%;
      }
    }
  }

  .stats-wrapper {
    width: 100% !important;
  }
}
  • URL: /components/raw/stat/stat.scss
  • Filesystem Path: bits/04-components/stat/stat.scss
  • Size: 2.5 KB

Display one piece of the stats slider.