Statistics 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/statistics.css?cb=">

<div class="statistics component">
    <div class="statistics__card-container">
        <div class="statistics-card">
            <div class="statistics-card__icon">
                <svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
                    <path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
                    <path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
                </svg>
            </div>
            <div class="statistics-card__title">
                <h2>101</h2>
            </div>
            <div class="statistics-card__text">
                <p>pretty dalmatians</p>
            </div>
        </div>
        <div class="statistics-card">
            <div class="statistics-card__icon">
                <svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
                    <path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
                    <path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
                </svg>
            </div>
            <div class="statistics-card__title">
                <h2>2</h2>
            </div>
            <div class="statistics-card__text">
                <p>metres of seperation at all times</p>
            </div>
        </div>
        <div class="statistics-card">
            <div class="statistics-card__icon">
                <svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
                    <path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
                    <path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
                </svg>
            </div>
            <div class="statistics-card__title">
                <h2>4</h2>
            </div>
            <div class="statistics-card__text">
                <p>corners of the earth</p>
            </div>
        </div>
        <div class="statistics-card">
            <div class="statistics-card__icon">
                <svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
                    <path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
                    <path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
                </svg>
            </div>
            <div class="statistics-card__title">
                <h2>2</h2>
            </div>
            <div class="statistics-card__text">
                <p>heads are better than one</p>
            </div>
        </div>
        <div class="statistics-card">
            <div class="statistics-card__icon">
                <svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
                    <path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
                    <path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
                </svg>
            </div>
            <div class="statistics-card__text">
                <p>Sign up by clicking <a href='#'>here</a></p>
            </div>
        </div>
        <div class="statistics-card">
            <div class="statistics-card__icon">
                <svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
                    <path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
                    <path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
                </svg>
            </div>
            <div class="statistics-card__text">
                <p>Give us a call on 01234 567890</p>
            </div>
        </div>
        <div class="statistics-card">
            <div class="statistics-card__icon">
                <svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
                    <path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
                    <path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
                </svg>
            </div>
            <div class="statistics-card__text">
                <p>We're open all the time, we never, ever close ever!</p>
            </div>
        </div>
        <div class="statistics-card">
            <div class="statistics-card__icon">
                <svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
                    <path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
                    <path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
                </svg>
            </div>
            <div class="statistics-card__text">
                <p>To find out more click this <a href='#'>link</a></p>
            </div>
        </div>
    </div>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/statistics.css?cb={{cacheBuster}}">
{{/if}}

<div class="statistics component{{#if spacer}} component--{{spacer}}-spacer{{/if}}">
  {{#if stats}}
  <div class="statistics__card-container">
    {{#each stats}}
      {{> @statistics-card}}
    {{/each}}
    </div>
  {{/if}}
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "stats": [
    {
      "icon": "<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z'/><path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z'/></svg>",
      "title": "101",
      "text": "<p>pretty dalmatians</p>"
    },
    {
      "icon": "<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z'/><path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z'/></svg>",
      "title": "2",
      "text": "<p>metres of seperation at all times</p>"
    },
    {
      "icon": "<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z'/><path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z'/></svg>",
      "title": "4",
      "text": "<p>corners of the earth</p>"
    },
    {
      "icon": "<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z'/><path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z'/></svg>",
      "title": "2",
      "text": "<p>heads are better than one</p>"
    },
    {
      "icon": "<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z'/><path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z'/></svg>",
      "text": "<p>Sign up by clicking <a href='#'>here</a></p>"
    },
    {
      "icon": "<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z'/><path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z'/></svg>",
      "text": "<p>Give us a call on 01234 567890</p>"
    },
    {
      "icon": "<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z'/><path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z'/></svg>",
      "text": "<p>We're open all the time, we never, ever close ever!</p>"
    },
    {
      "icon": "<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z'/><path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z'/></svg>",
      "text": "<p>To find out more click this <a href='#'>link</a></p>"
    }
  ]
}
  • Content: 
    .statistics-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: rem(50);
    width: 50%;

    @include breakpoint(medium) {
        padding: rem(20);
        width: 25%;
    }

    &__icon {
        height: 50px;
        margin-bottom: rem(50);
        width: 100%;

        @include breakpoint(medium) {
            margin-top: rem(50);
        }

        svg {
            height: 100%;
            width: 100%;
        }
    }

    &__title {
        @extend %heading01;
        text-align: center;
        width: 100%;
    }

    &__text {
        text-align: center;
        width: 100%;
    }
}
  • URL: /components/raw/statistics/_statistics-card.scss
  • Filesystem Path: source/patterns/03-components/card-collections/statistics/_statistics-card.scss
  • Size: 641 Bytes
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
@import './_statistics-card';

.statistics {
    &____card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}
  • URL: /components/raw/statistics/statistics.scss
  • Filesystem Path: source/patterns/03-components/card-collections/statistics/statistics.scss
  • Size: 243 Bytes

No notes defined.