360Giving Design System - Components

Prose Card 

<div class="prose">
    <div class="prose-card">
        <div class="prose-card__content">
            <h2 class="prose-card__title">321</h2>
            <p class="prose-card__text">Grants</p>
            <p class="prose-card__text">
                <a href="#" class="button">Explore</a>
            </p>
        </div>
    </div>

    <br>

    <div class="prose-card prose-card--yellow">
        <div class="prose-card__content">
            <h2 class="prose-card__title">Create</h2>
            <p class="prose-card__text">Use data to build tools and visuals</p>
            <p class="prose-card__text">
                <a href="#" class="button button--yellow">Share</a>
            </p>
        </div>
    </div>

    <br>

    <div class="prose-card prose-card--orange">
        <div class="prose-card__content">
            <h2 class="prose-card__title">Share</h2>
            <p class="prose-card__text">Publish your Data</p>
            <p class="prose-card__text">
                <a href="#" class="button button--orange">Share</a>
            </p>
        </div>
    </div>

    <br>

    <div class="prose-card prose-card--teal">
        <div class="prose-card__content">
            <h2 class="prose-card__title">Search</h2>
            <p class="prose-card__text">Find funding data to inform</p>
            <p class="prose-card__text">
                <a href="#" class="button button--teal">Share</a>
            </p>
        </div>
    </div>

    <br>

    <div class="prose-card prose-card--red">
        <div class="prose-card__content">
            <h2 class="prose-card__title">321</h2>
            <p class="prose-card__text">Grants</p>
            <p class="prose-card__text">
                <a href="#" class="button button--red">Share</a>
            </p>
        </div>
    </div>
</div>
 
<div class="prose">
  <div class="prose-card">
    <div class="prose-card__content">
      <h2 class="prose-card__title">321</h2>
      <p class="prose-card__text">Grants</p>
      <p class="prose-card__text">
        <a href="#" class="button">Explore</a>
      </p>
    </div>
  </div>

  <br>

  <div class="prose-card prose-card--yellow">
    <div class="prose-card__content">
      <h2 class="prose-card__title">Create</h2>
      <p class="prose-card__text">Use data to build tools and visuals</p>
      <p class="prose-card__text">
        <a href="#" class="button button--yellow">Share</a>
      </p>
    </div>
  </div>

  <br>

  <div class="prose-card prose-card--orange">
    <div class="prose-card__content">
      <h2 class="prose-card__title">Share</h2>
      <p class="prose-card__text">Publish your Data</p>
      <p class="prose-card__text">
        <a href="#" class="button button--orange">Share</a>
      </p>
    </div>
  </div>

  <br>

  <div class="prose-card prose-card--teal">
    <div class="prose-card__content">
      <h2 class="prose-card__title">Search</h2>
      <p class="prose-card__text">Find funding data to inform</p>
      <p class="prose-card__text">
        <a href="#" class="button button--teal">Share</a>
      </p>
    </div>
  </div>

  <br>

  <div class="prose-card prose-card--red">
    <div class="prose-card__content">
      <h2 class="prose-card__title">321</h2>
      <p class="prose-card__text">Grants</p>
      <p class="prose-card__text">
        <a href="#" class="button button--red">Share</a>
      </p>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .prose {
  
  .prose-card {
    --prose-card-border-hsl: var(--base-hsl);
    --prose-card-text-hsl: var(--base-hsl);

    background: hsla(var(--white-hsl), 1);
    box-shadow: 0px 4px 8px hsla(var(--base-hsl), .15);
    position: relative;
    text-align: center; 

    &:before {
      content: '';
      width: 4px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: hsla(var(--prose-card-border-hsl, transparent), 1);
    }
  }

  .prose-card__content {
    padding: 16px 24px 16px 24px;  
    @include breakpoint($large) { padding: 48px 64px 48px 64px; }
  }

  .prose-card__image { padding-bottom: 32px; }

  .prose-card__title {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0;
    color: hsla(var(--prose-card-text-hsl), 1);
  }

  .prose-card__text {
    font-size: 1rem;
    font-weight: 100;
  }
}

.prose {
  .prose-card--orange { 
    --prose-card-border-hsl: var(--orange-hsl);
    --prose-card-text-hsl: var(--orange-dark-hsl);
  }
  .prose-card--yellow { 
    --prose-card-border-hsl: var(--yellow-hsl);
    --prose-card-text-hsl: var(--yellow-dark-hsl);
  }
  .prose-card--teal { 
    --prose-card-border-hsl: var(--teal-hsl);
    --prose-card-text-hsl: var(--teal-dark-hsl);
  }
  .prose-card--red { 
    --prose-card-border-hsl: var(--red-hsl);
    --prose-card-text-hsl: var(--red-hsl);
  }
}
  • URL: /components/raw/prose-card/prose-card.scss
  • Filesystem Path: src/components/04-modules/prose-card/prose-card.scss
  • Size: 1.4 KB

No notes defined.