Component Library

Statistic: Right 

<div class="statistic-with-text statistic-with-text--right">
    <div class="statistic">
        <ul>
            <li>
                <h3 class="statistic__title">X,XXX</h3>
                <div class="statistic__text">Enrolled Students</div>
            </li>
        </ul>
    </div>
    <div class="statistic-with-text__text text-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
 
<div class="statistic-with-text statistic-with-text--right{% if not text %} statistic-with-text--full-width{% endif %}">
  {% include "@stat" with statistic %}
  {% if text %}<div class="statistic-with-text__text text-content">{{text|raw}}</div>{% endif %}
</div>
 
{
  "statistic": {
    "statistics_label": "",
    "statistics": [
      {
        "statistic_title": "X,XXX",
        "statistic_text": "Enrolled Students"
      }
    ]
  },
  "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
}
  • Content: 
    .statistic-with-text {
  @include media-breakpoint-up(md) {
    display: flex;
    align-items: flex-start;
  }

  &.statistic-with-text--full-width {
    .statistic {
      @include media-breakpoint-up(md) {
        width: 100%;
      }
    }
  }

  .statistic {
    margin-top: rem(28);
    margin-bottom: rem(42);
    @include media-breakpoint-up(md) {
      flex: 0 0 auto;
      width: rem(324);
      margin: rem(10) rem(45) rem(10) 0;
    }
    @include media-breakpoint-up(lg) {
      margin-right: rem(90);
    }
  }

  .statistic-with-text__text {
    margin-bottom: 0;
    @include media-breakpoint-up(md) {
      flex: 1 1 0;
    }
  }

  &.statistic-with-text--right {
    @include media-breakpoint-up(md) {
      flex-direction: row-reverse;
    }
    .statistic {
      @include media-breakpoint-up(md) {
        margin: rem(10) 0 rem(10) rem(45);
      }
      @include media-breakpoint-up(lg) {
        margin-left: rem(90);
      }
    }
  }
}
  • URL: /components/raw/statistic/_statistic.scss
  • Filesystem Path: src/components/statistic/_statistic.scss
  • Size: 962 Bytes

Statistic

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • This is a companion component to stat, allowing for room for text (and floats the statistic box left or right) - this should typically be used for output globally
  • There are two variations, the default floats the statistic box to the left, and the --right variant floats the statistic box to the right
  • The text portion of the component surrounding the statistic allows for raw html (tables may be added to this section and will display properly)
  • The custom styles are imported into the index.scss file as `@import “../components/statistic/statistic”;
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--statistic-with-text">.