FTSE Russell Styleguide

Index Card 

<div class="index-card">
    <a href="#">
        <div class="index-card--containers">
            <div class="index-card--container">
                <div class="index-card-code">ABC3</div>
                <div class="index-card-indicator down">
                    <span class="index-card-change down">-32.31</span>
                    <svg class="icon">
            <use xlink:href="/assets/sprites/icons.svg#ico-caret"></use>
          </svg>
                </div>
            </div>
            <div class="index-card--container">
                <div class="index-card-value">7363.12</div>
                <div class="index-card-percentage down">
                    6.45%
                </div>
                <div class="index-card-timestamp">
                    <svg class="icon">
            <use xlink:href="/assets/sprites/icons.svg#ico-clock"></use>
          </svg>
                    <span>3:15pm</span>
                </div>
            </div>
        </div>
    </a>
</div>
 
<div class="index-card">
  <a href="{{ url }}">
    <div class="index-card--containers">
      <div class="index-card--container">
        <div class="index-card-code">{{ code }}</div>
        <div class="index-card-indicator {{ change_indicator }}">
          <span class="index-card-change {{ change_indicator }}">{{ change_value }}</span>
          <svg class="icon">
            <use xlink:href="/assets/sprites/icons.svg#ico-caret"></use>
          </svg>
        </div>
      </div>
      <div class="index-card--container">
        <div class="index-card-value">{{ value }}</div>
        <div class="index-card-percentage {{ change_indicator }}">
          {{ percentage }}
        </div>
        <div class="index-card-timestamp">
          <svg class="icon">
            <use xlink:href="/assets/sprites/icons.svg#ico-clock"></use>
          </svg>
          <span>{{ timestamp }}</span>
        </div>
      </div>
    </div>
  </a>
</div>
 
{
  "code": "ABC3",
  "change_value": -32.31,
  "change_indicator": "down",
  "value": 7363.12,
  "percentage": "6.45%",
  "timestamp": "3:15pm",
  "url": "#"
}
  • Content: 
    .index-card {
  color: $gray-light;
  min-width: 238px;
  padding: $space-xxs 2.5rem;
  width: 100%;

  @include mq("320px") {
    padding: $space-xxs 3rem;
  }

  @include mq($breakpoint-xs) {
    padding: $space-xxs 4rem;
  }

  @include mq("400px") {
    padding: $space-xxs 5rem;
  }

  @include mq($breakpoint-sm) {
    padding: $space-xxs $space-sm;
  }

  a {
    color: $gray-light;
  }

  &--containers {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    min-height: 80px;
  }

  &--container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: $space-xxs 0;
  }

  &:hover {
    background-color: $gray-lighter;
  }

  &-code {
    color: $gray-darker;
    flex-basis: auto;
    font-weight: $font-weight-normal;
  }

  &-change {
    &.down {
      color: $red;
    }

    &.up {
      color: $accent-light;
    }
  }

  &-indicator {
    flex-basis: auto;
    justify-self: end;
    margin-left: $space-xs;
    white-space: nowrap;

    & > * {
      display: inline-block;
      vertical-align: middle;
    }

    .icon {
      height: 12px;
      margin-left: $space-xxs;
      width: 12px;
    }

    &.down {
      .icon {
        fill: $red;
      }
    }

    &.up {
      .icon {
        fill: $accent-light;
        transform: rotate(180deg);
      }
    }
  }

  &-value {
    font-size: $font-size-sm;
  }

  &-percentage {
    font-size: $font-size-sm;

    .icon {
      fill: $gray-light;
      height: $font-size-xxs;
      width: $font-size-xxs;

      &.up {
        transform: rotate(180deg);
      }
    }
  }

  &-timestamp {
    font-size: $font-size-sm;
    justify-self: end;

    & > * {
      display: inline-block;
      vertical-align: middle;
    }

    .icon {
      fill: $gray-light;
      height: 12px;
      margin-right: $space-xxs;
      width: 12px;
    }
  }
}
  • URL: /components/raw/index_card/_index_card.scss
  • Filesystem Path: src/components/molecules/cards/index_card/_index_card.scss
  • Size: 1.9 KB

There are no notes for this item.