360Giving Design System - Components

Homepage Card 

<div class="homepage-card">
    <div class="homepage-card__content">
        <h2 class="homepage-card__title">
            <span class="homepage-card__title-numbers">181</span>
            <span>Funders</span>
        </h2>
        <p class="homepage-card__description">Short sentence giving some context to the funders section lorem ipsum dolor sit eiusmod incididunt ut et dolore.</p>
        <p>
            <a href="#" class="button">Explore</a>
        </p>
    </div>
</div>
 
<div class="homepage-card">
  <div class="homepage-card__content">
    <h2 class="homepage-card__title">
      <span class="homepage-card__title-numbers">181</span>
      <span>Funders</span>
    </h2>
    <p class="homepage-card__description">Short sentence giving some context to the funders section lorem ipsum dolor sit eiusmod incididunt ut et dolore.</p>
    <p>
      <a href="#" class="button">Explore</a>
    </p>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .homepage-card {
  text-align: center;
  margin-bottom: 32px;

  &__title {
    font-weight: normal;
  }

  &__title-numbers {
    color: $orange;
    display: block;
    font-size: 56px;
    font-weight: 500;
  }

  &__description {
    font-size: 19px;
    font-weight: 400;
    margin-bottom: 40px;
  }
}
  • URL: /components/raw/homepage-card/homepage-card.scss
  • Filesystem Path: src/components/04-modules/homepage-card/homepage-card.scss
  • Size: 308 Bytes

No notes defined.