design.stjude.cloud

Cards 

<!-- Cards -->
<div class="container">
    <div class="row">
        <div class="col-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mt-4">Card</h4>
                    <p>For certain types of information such as links to multiple apps or studies, developers may which to utilize the card approach featured throughout the intro pages.</p>
                    <a href="#" target="_blank" rel="noopener noreferrer" class="btn btn-primary">Button</a>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card no-shadow">
                <div class="card-body">
                    <h4 class="card-title mt-4">Card - No Shadow</h4>
                    <p>For certain types of information such as links to multiple apps or studies, developers may which to utilize the card approach featured throughout the intro pages.</p>
                    <a href="#" target="_blank" rel="noopener noreferrer" class="btn btn-primary">Button</a>
                </div>
            </div>
        </div>
        <div class="col-6 mb-4">
            <div class="card">
                <div class="card-header">Card Header</div>
                <div class="card-body">
                    <img class="icon" src="../../assets/images/icon-viz.png" alt="Visualization Community Logo" />
                    <h4 class="card-title mt-4">Full Card - w/ Icon</h4>
                    <p>For certain types of information such as links to multiple apps or studies, developers may which to utilize the card approach featured throughout the intro pages.</p>
                    <a href="#" target="_blank" rel="noopener noreferrer" class="btn btn-primary">Button</a>
                </div>
                <div class="card-footer">Card footer</div>
            </div>
        </div>
        <div class="col-6">
            <div class="card no-shadow">
                <div class="card-header">Card Header</div>
                <div class="card-body">
                    <img class="photo" src="../../assets/images/researchers-1446503301786.jpg" alt="St. Jude Research" />
                    <h4 class="card-title mt-4">Full Card - No Shadow w/ Photo </h4>
                    <p>For certain types of information such as links to multiple apps or studies, developers may which to utilize the card approach featured throughout the intro pages.</p>
                    <a href="#" target="_blank" rel="noopener noreferrer" class="btn btn-primary">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>
  • Content: 
    Cards CSS

```
.card {
  text-align: center;
  border-radius: 6px;
  @include box-shadow(0, 0, 6px, 1px, rgba($gray-500, 0.4));
  @include transition($trantype: box-shadow, $trantime: 0.3s);
  overflow: hidden;

  &:hover {
    @include box-shadow(0, 5px, 6px, 1px, rgba($gray-500, 0.8));
    @include transition($trantype: box-shadow);

    .icon, .photo {
      opacity: .9;
    }
  }

  &.no-shadow {
    box-shadow: none !important;
  }

  img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .icon {
    width: auto;
    max-width: 50%;
    padding-top: 15px;
  }

  .photo {
    margin: -20px 0 0 -40px;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
  }
  
  .card-header {
    color: $blue-dark;
    background-color: $primary;
    background-color: transparent;
    border-bottom: 1px solid $gray-100;
    border-top: 6px solid $blue-dark;
    padding-top: 20px;
  }

  .card-footer {
    background-color: transparent;
    border-top: 1px solid $gray-100;
    text-align: center;

    &.blank {
      border-top: 0;
      padding: 26px 0;
    }
  }
}
```
  • URL: /components/raw/cards/cards.scss
  • Filesystem Path: components/cards/cards.scss
  • Size: 1.1 KB

No notes defined.