NNPHI Pattern Library

Numbers: Default 

<div class="numbers numbers--default">
    <ul class="numbers__list">
        <li class="numbers__item">
            <span class="numbers__item-number">
                $2.2B
            </span>
            <span class="numbers__item-text">
                in annual funding
            </span>
        </li>
        <li class="numbers__item">
            <span class="numbers__item-number">
                50
            </span>
            <span class="numbers__item-text">
                Members
            </span>
        </li>
        <li class="numbers__item">
            <span class="numbers__item-number">
                12,000
            </span>
            <span class="numbers__item-text">
                subject matter experts
            </span>
        </li>
    </ul>
    <div class="numbers__calls-to-action">
        <a href="#" class="standard-button standard-button--secondary standard-button-position--default">
            <span class="standard-button__text">
                Learn more about PHIs
            </span>
            <span class="standard-button__chevron-icon">
                <svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
                    <title>right chevron</title>
                    <path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
                </svg>
            </span>
        </a>
        <a href="#" class="standard-button standard-button--secondary standard-button-position--default">
            <span class="standard-button__text">
                Find your membership path
            </span>
            <span class="standard-button__external-link-icon">
                <svg role="img" class="external-link" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <title>external</title>
                    <path class="_mark external-link__shape" fill-rule="evenodd" clip-rule="evenodd" d="M12.5858 2H10C9.44771 2 9 1.55228 9 1C9 0.447715 9.44771 0 10 0H16V6C16 6.55228 15.5523 7 15 7C14.4477 7 14 6.55228 14 6V3.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L12.5858 2ZM2 14H12V9C12 8.44771 12.4477 8 13 8C13.5523 8 14 8.44771 14 9V16H0V2H7C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H2V14Z" />
                </svg>
            </span>
        </a>
    </div>
</div>
 
<div class="numbers numbers--{{ component.variant | default('default') }}">
    <ul class="numbers__list">
        {% for number in component.numbers %}
            <li class="numbers__item">
                <span class="numbers__item-number">
                    {{ number.number }}
                </span>
                <span class="numbers__item-text">
                    {{ number.text }}
                </span>
            </li>
        {% endfor %}
    </ul>
    {% if component.callsToAction|length > 0 %}
        <div class="numbers__calls-to-action">
            {% for callToAction in component.callsToAction %}
                {% include 'bits/standard-button/standard-button.twig' with {
                    button: {
                        text: callToAction.linkText,
                        url: callToAction.linkUrl,
                        linkType: callToAction.linkType,
                        variant: callToAction.variant|default('secondary'),
                    }
                } %}
            {% endfor %}
        </div>
    {% endif %}
</div>
 
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  },
  "component": {
    "type": "numbers",
    "variant": "default",
    "numbers": [
      {
        "number": "$2.2B",
        "text": "in annual funding"
      },
      {
        "number": "50",
        "text": "Members"
      },
      {
        "number": "12,000",
        "text": "subject matter experts"
      }
    ],
    "callsToAction": [
      {
        "linkText": "Learn more about PHIs",
        "linkUrl": "#",
        "linkType": "internal"
      },
      {
        "linkText": "Find your membership path",
        "linkUrl": "#",
        "linkType": "external"
      }
    ]
  }
}
  • Content: 
    $homepageBreakpointMapSection: 75rem;

.numbers {
    --numberColor: var(--purple);
    --itemTextColor: var(--black);

    &--default {
        @include componentWithMargin;
    }

    &--homepage {
        --numberColor: var(--blueTint);
        --itemTextColor: var(--blueTint);

        grid-row: 2;
        grid-column: 1;
        z-index: 1;

        @media (min-width: $homepageBreakpointMapSection) {
            --numberColor: var(--purple);
            --itemTextColor: var(--purple);
            width: 100%;
            max-width: 62rem;
            margin-inline: auto;
        }
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: space-evenly;
    }

    &__item {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    &__item-number {
        @include billboardTitle;
        color: var(--numberColor);
        text-align: center;
    }

    &__item-text {
        @include bodyLarge;
        color: var(--itemTextColor);
        text-align: center;
    }

    &__calls-to-action {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        margin-top: 3rem;
    }
}
  • URL: /components/raw/numbers/numbers.scss
  • Filesystem Path: patterns/components/numbers/numbers.scss
  • Size: 1.3 KB

No notes defined.