Lehigh Clutch Style Guide

Card: Default 

<div class="card">
    <div class="card-image">
        <img src="http://placekitten.com/833/468" class="card-img-top" alt="" />
    </div>
    <div class="card-body">
        <h3 class="card-title">
            <a href="https://es.pn">This is the Title</a>
        </h3>
        <div class="card-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>
 
{% set card_headline_element = card_headline_element|default('h3') %}
<div class="card">
  {% block card_img %}
    {% if card_img %}
    <div class="card-image">
      <img src="{{ card_img }}" class="card-img-top" alt="" />
    </div>
    {% endif %}
  {% endblock card_img %}
  <div class="card-body">
    {% block card_heading %}
      {% if card_headline %}
      <{{ card_headline_element }} class="card-title">
        {% if card_link %}<a href="{{ card_link }}">{% endif %}{{ card_headline }}{% if card_link %}</a>{% endif %}
      </{{ card_headline_element }}>
      {% endif %}
    {% endblock card_heading %}
    {% block card_content %}
      {% if card_content %}
        <div class="card-text">
          <p>{{ card_content }}</p>
        </div>
      {% endif %}
    {% endblock card_content %}
    {% block card_buttons %}
      {% if buttons %}
      <div class="card-buttons">
        {% for button in buttons %}
          {% include "@a_tag" with button only %}
        {% endfor %}
      </div>
      {% endif %}
    {% endblock card_buttons %}
  </div>
</div>
 
{
  "card_img": "http://placekitten.com/833/468",
  "card_link": "https://es.pn",
  "card_headline": "This is the Title",
  "card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  "card_headline_element": "h3"
}
  • Content: 
    .card {
  width: 100%;
  background-color: $white;
  background-color: var(--white, $white);
  border-left: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 5px;
  border-top: 3px solid $accent_color;
  border-top: 3px solid var(--accent_color, $accent_color);
  -webkit-box-shadow: 0 5px 15px $drop_shadow;
  -moz-box-shadow: 0 5px 15px $drop_shadow;
  box-shadow: 0 5px 15px $drop_shadow;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;

  .color-scheme-dark & {
    -webkit-box-shadow: 0 5px 15px $drop_shadow_darkmode;
    -moz-box-shadow: 0 5px 15px $drop_shadow_darkmode;
    box-shadow: 0 5px 15px $drop_shadow_darkmode;
    color: $base_font;
    color: var(--base_font, $base_font);

    h3,
    h4 {
      a {
        color: var(--hyperlink, $hyperlink);

        &:hover,
        &:focus {
          text-decoration: none;
          color: var(--black, $black) !important;
          border-bottom: 2px solid var(--accent_color, $accent_color);
        }
      }
    }
  }

  .right-content & {
    margin: 0 0 $space-two 0;
  }

  .card-img-top {
    transition: transform .2s;
  }

  &:hover,
  &:focus-within {
    -webkit-box-shadow: 0 0 10px $drop_shadow;
    -moz-box-shadow: 0 0 10px $drop_shadow;
    box-shadow: 0 0 10px $drop_shadow;

    .color-scheme-dark & {
      -webkit-box-shadow: 0 0 10px $drop_shadow_darkmode;
      -moz-box-shadow: 0 0 10px $drop_shadow_darkmode;
      box-shadow: 0 0 10px $drop_shadow_darkmode;
    }

    .card_image {
      img {
        transform: scale(1.25);
      }
    }
  }

  .card-image {
    .media {
      display: block;
    }

    img {
      width: 100%;
    }
  }

  &-body {
    display: flex;
    flex-direction: column;

    .card-title {
      color: $body-color;
      color: var(--body-color, $body-color);

      a {
        color: inherit;
        text-decoration: underline;
        border-bottom: 0;

        &:hover,
        &:focus {
          text-decoration: none;

          .color-scheme-dark & {
            color: $body-color;
            color: var(--body-color, $body-color);
          }

          .accent-lehigh_brown &,
          .accent-blue_k60 & {
            .color-scheme-dark & {
              color: $white;
              color: var(--white, $white);
            }
          }
        }
      }
    }

    .card-buttons {
      margin-top: auto;
    }
  }

  &-text {
    margin: $spacer 0;

    .color-scheme-dark & {
      color: $base_font;
      color: var(--base_font, $base_font);
    }

    a {
      color: $hyperlink_breadcrumb;
      color: var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
      border-bottom: 2px solid $hyperlink_breadcrumb;
      border-bottom: 2px solid var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
    }

    .color-scheme-dark & {
      a {
        color: $hyperlink_breadcrumb;
        color: var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
        border-bottom: 2px solid $hyperlink_breadcrumb;
        border-bottom: 2px solid var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);

        .accent-lehigh_brown &,
        .accent-blue_k60 & {
          color: $white;
          color: var(--white, $white);
          border-bottom: 2px solid $white;
          border-bottom: 2px solid var(--white, $white);
        }

        &:hover,
        &:focus {
          color: $black !important;
          color: var(--black, $black) !important;
          border-bottom: $accent_color !important;
          border-bottom: var(--accent_color, $accent_color) !important;
        }
      }
    }
  }

  .btn {
    margin: $space-one-half;
  }
}
  • URL: /components/raw/card/card.scss
  • Filesystem Path: bits/04-components/card/card.scss
  • Size: 3.7 KB

Display card with image.