FTSE Russell Styleguide

Contact Card 

<div class="contact-card col-12">
    <div class="contact-card--inner">

        <div class="contact-card__title">
            <h5>London Press Contact</h5>
        </div>
        <div class="contact-card__details">
            <div class="contact-card__phone">
                <label>Telephone</label>
                <p>+44 (0) 207 797 1222</p>
            </div>
            <div class="contact-card__email">
                <label>Email</label>
                <p><a href="#">newsroom@lseg.com</a></p>
            </div>
        </div>
    </div>
</div>
 
<div class="contact-card col-12">
  <div class="contact-card--inner">
    {% if bigTitle %}<h4>{{bigTitle}}</h4>{% endif %}
    <div class="contact-card__title">
      <h5>{{title}}</h5>
    </div>
    <div class="contact-card__details">
      <div class="contact-card__phone">
        <label>Telephone</label>
        <p>{{phone}}</p>
      </div>
      <div class="contact-card__email">
        <label>Email</label>
        <p><a href="#">{{email}}</a></p>
      </div>
    </div>
  </div>
</div>
 
{
  "title": "London Press Contact",
  "phone": "+44 (0) 207 797 1222",
  "email": "newsroom@lseg.com"
}
  • Content: 
    .contact-card {
  margin-bottom: 2rem;

  &--wrapper {
    margin: 0;
    padding: $space-sm 0;
    grid-template-columns: 1fr;
    grid-column-gap: $space-xl;   

  @include mq($breakpoint-lg) {
    padding: $space-md 0;
    margin-top: $space-xxl;
    grid-template-columns: 100%;
    grid-column-gap: 0;
    }
  }

  h4 {
      margin-bottom: $space-md;
  }

  h5 {
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    border-bottom: 1px solid $gray-light;
  }

  &__details {
    font-size: $font-size-sm;
    margin: $space-md 0;
  }

  &__phone,
  &__email {
    margin: $space-sm 0;
  }

  p {
    margin: 0;
  }

  a {
    color: $gray;
  }
}
  • URL: /components/raw/contact_card/_contact_card.scss
  • Filesystem Path: src/components/molecules/cards/contact_card/_contact_card.scss
  • Size: 672 Bytes

There are no notes for this item.