360Giving Design System - Components

Cards Section: Dashboard Stats 

<div class="cards-section">
    <section class="grid grid--five-columns">
        <div class="grid__1">

            <div class="base-card base-card--yellow">

                <div class="base-card__content">
                    <h2 class="base-card__title">589,282</h2>
                    <p class="base-card__text">Grants</p>

                </div>
            </div>

        </div>
        <div class="grid__1">

            <div class="base-card base-card--orange">

                <div class="base-card__content">
                    <h2 class="base-card__title">260,921</h2>
                    <p class="base-card__text">Recipients</p>

                </div>
            </div>

        </div>
        <div class="grid__1">

            <div class="base-card base-card--teal">

                <div class="base-card__content">
                    <h2 class="base-card__title">172</h2>
                    <p class="base-card__text">Publishers</p>

                </div>
            </div>

        </div>
        <div class="grid__1">

            <div class="base-card base-card--black">

                <div class="base-card__content">
                    <h2 class="base-card__title">202</h2>
                    <p class="base-card__text">Funders</p>

                </div>
            </div>

        </div>
        <div class="grid__1">

            <div class="base-card base-card--red">

                <div class="base-card__content">
                    <h2 class="base-card__title">£107.9bn</h2>
                    <p class="base-card__text">Total</p>

                </div>
            </div>

        </div>
    </section>

    <div class="grid-aligned align-right">
        <small>last updated: 4 am 21st April 2021</small>
    </div>
</div>
 
<div class="cards-section">
  <section class="grid grid--five-columns">
    <div class="grid__1">
      {% render '@base-card--dynamic', {
        custom_class: 'base-card--yellow',
        value: '589,282',
        label: 'Grants'
      } %}
    </div>
    <div class="grid__1">
      {% render '@base-card--dynamic', {
        custom_class: 'base-card--orange',
        value: '260,921',
        label: 'Recipients'
      } %}
    </div>
    <div class="grid__1">
      {% render '@base-card--dynamic', {
        custom_class: 'base-card--teal',
        value: '172',
        label: 'Publishers'
      } %}
    </div>
    <div class="grid__1">
      {% render '@base-card--dynamic', {
        custom_class: 'base-card--black',
        value: '202',
        label: 'Funders'
      } %}
    </div>
    <div class="grid__1">
      {% render '@base-card--dynamic', {
        custom_class: 'base-card--red',
        value: '£107.9bn',
        label: 'Total'
      } %}
    </div>
  </section>

  <div class="grid-aligned align-right">
    <small>last updated: 4 am 21st April 2021</small>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .cards-section {
  padding: 32px 0;
  
  &__heading,
  &__tagline {
    text-align: center;
    font-size: 2rem;
  }    

  &__tagline {
    font-weight: 200;

    > a { 
      color: hsla(var(--orange-dark-hsl), 1); 
      font-weight: 200;
    }
  }
}
  • URL: /components/raw/cards-section/cards-section.scss
  • Filesystem Path: src/components/05-templates/cards-section/cards-section.scss
  • Size: 253 Bytes

No notes defined.