<!-- Card starts -->
<div class="c-card o-stack--xs ">
    <h4 class="c-card-list__name">
        <a href="#0" class="c-card-list__name-link">Card title</a>
    </h4>
    <p class="o-body-text--sm">Card content</p>
</div>
<!-- Card ends -->
<!-- Card starts -->
<{{#if c-card-list }}li{{else}}div{{/if}} class="c-card o-stack--xs {{#if c-card-list }} c-card-list__item{{/if}}">
  <h4 class="{{#if c-card-list }}c-card__name{{else}}c-card-list__name{{/if}}">
    <a href="#0" class="c-card-list__name-link">{{#if c-card-list }}0202-WO-000{{woNumber}}{{else}}{{cardName}}{{/if}}</a>
  </h4>
  {{#if c-card-list }}
  <a href="#0" class="c-card-list__company">{{#if companyLogo}}<img class="c-card-list__company-logo" src="{{companyLogo}}" alt="{{cardCompany}} logo">{{/if}}{{cardCompany}}</a>
  <div class="c-card-list__meta">
    <span class="c-card-list__types">{{productTypes}}</span>
    <div class="u-d-flex">
      <span class="c-card-list__items">{{numItems}} items</span>
      <time class="c-card-list__date" datetime="2019-07-07">July 7, 2019</time>
    </div>
  </div>
  {{else}}
  <p class="o-body-text--sm">{{cardContent}}</p>
  {{/if}}
</{{#if c-card-list }}li{{else}}div{{/if}}>
<!-- Card ends -->
{
  "cardName": "Card title",
  "cardContent": "Card content"
}
  • Content:
    .c-card {
      padding: $space-unit;
      border-radius: $global-radius;
      background: $color-gradient--md;
      box-shadow: $global-box-shadow, inset 0 0 0 .08rem rgba($color-grey-900, 0.1);
    }
    
    .c-card-list__item {
    
      & + & {
        margin-top: $space-unit;
      }
    }
    
    .c-card-list__name-link {
      font-size: $text-size-7;
    }
    
    .c-card-list__company {
      text-decoration: underline;
      text-transform: uppercase;
      margin-top: $space-xs;
      font-size: $text-size-7;
    }
    
      .c-card-list__company-logo {
        width: $space-md;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: $space-xxs;
      }
    
    .c-card-list__meta {
      margin-top: $space-lg;
      font-size: $text-size-7;
      color: $color-grey-600;
    }
      .c-card-list__types {
        display: block;
        margin: $space-xs 0;
      }
    
      .c-card-list__date {
        margin-left: auto;
      }
    
    // Manager Dashboard styles
    
    .c-card-container--manager-dashboard {
      background-color: $color-brand-primary-0;
      border-radius: $global-radius;
      box-shadow: inset 0 0 $space-xs rgba($color-brand-primary-800, 0.3);
    
      > *:first-child {
        background-color: $color-white;
        padding: $space-unit $space-xs 0 0;
        box-shadow: $space-xxs 0 $space-xxs -#{$space-xxs} rgba($color-brand-primary-800, 0.3);
      }
    
      > * {
        padding: $space-unit 0 0 $space-xs;
      }
    }
    
    
    .c-card-list--manager-dashboard {
      max-height: rem(900);
      padding: 0 rem(1);
      overflow-y: scroll;
    
      &::after {
        display: block;
        height: rem(4);
        content: '';
      }
    }
    
    
    
    ////////////////////////
    // Big link card styles
    ///////////////////////
    
    .c-card--big-link__item {
      transition: $global-transition;
    
      @include hocus() {
        flex-basis: 20%;
      }
    }
    
    .c-card--big-link {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      min-width: rem(180);
      min-height: calc(10rem + 2vw);
      padding: 0;
      color: $color-white;
      text-decoration: none;
      background: $color-brand-primary;
    
      @include hocus() {
        color: $color-white;
        background: lighten($color-brand-primary, 5%);
        text-decoration: none;
    
        .c-card--big-link__description {
          z-index: 1;
          height: auto;
          padding: $space-unit;
        }
      }
    }
    
    .c-card--big-link__name {
      color: $color-white;
      font-size: $text-size-7;
      letter-spacing: rem(.5);
      text-align: center;
      text-transform: uppercase;
    }
    
    .c-card--big-link__description {
      position: absolute;
      top: 98.6%;
      right: 0;
      left: 0;
      height: 0;
      padding: 0 $space-unit;
      overflow: hidden;
      border-radius: 0 0 $space-xxxs $space-xxxs;
      background-color: darken($color-brand-primary, 10%);
      box-shadow: $global-box-shadow--md;
      color: $color-white;
      line-height: 1.3;
      transition: $global-transition;
    }
    
    .c-card--big-link--well {
      background: $color-well-analysis;
    
      @include hocus() {
        background: lighten($color-well-analysis, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-well-analysis, 30%);
      }
    }
    
    .c-card--big-link--inventory {
      background: $color-current-inventory;
    
      @include hocus() {
        background: lighten($color-current-inventory, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-current-inventory, 30%);
      }
    }
    
    .c-card--big-link--history {
      background: $color-order-history;
    
      @include hocus() {
        background: lighten($color-order-history, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-order-history, 30%);
      }
    }
    
    .c-card--big-link--inspection {
      background: $color-inspection-reports;
    
      @include hocus() {
        background: lighten($color-inspection-reports, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-inspection-reports, 30%);
      }
    }
    
    .c-card--big-link--reporting {
      background: $color-reporting;
    
      @include hocus() {
        background: lighten($color-reporting, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-reporting, 20%);
      }
    }
    
  • URL: /components/raw/cards/_cards.scss
  • Filesystem Path: components/_code-components/cards/_cards.scss
  • Size: 3.9 KB

There are no notes for this item.