Lehigh Clutch Style Guide

Content Preview 

<div class="card mb-3 preview_content">
    <div class="row no-gutters">
        <div class="col-sm content-preview-content">
            <div class="card-body">
                <h2 class="card-title">Card title</h2>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div><!-- end col -->
        <div class="col-12 col-sm-4 preview-img">
            <img src="/img/lava-2.jpg" alt="preview" />
        </div><!-- end col-4 -->
    </div>
</div>
 
<div class="card mb-3 preview_content">
  <div class="row no-gutters">
    <div class="col-sm content-preview-content">
      <div class="card-body">
        {% block preview_override %}
        <h2 class="card-title">Card title</h2>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        {% endblock preview_override %}
      </div>
    </div><!-- end col -->
    {% block image_override %}
    {% if preview_img is not empty %}
    <div class="col-12 col-sm-4 preview-img">
      <img src="{{ preview_img }}" alt="{{ preview_alt }}" />
    </div><!-- end col-4 -->
    {% endif %}
    {% endblock image_override %}
  </div>
</div>
 
{
  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Ac ut consequat semper viverra nam libero justo.",
  "preview_img": "/img/lava-2.jpg",
  "preview_alt": "preview"
}
  • Content: 
    .preview_content {
  background-color: $grey_lightest;
  background-color: var(--grey_lightest, $grey_lightest);
  padding: $spacer;
  margin-bottom: $space_and_half;
  margin-top: $space_and_half;

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


  .card-body {
    color: $base_font !important;
    color: var(--base_font, $base_font) !important;

    h2 {
      color: $base_font !important;
      color: var(--base_font, $base_font) !important;
    }

    .color-scheme-dark & {
      background-color: $dark_mode_grey;
      background-color: var(--dark_mode_grey, $dark_mode_grey);
      color: $white !important;
      color: var(--white, $white) !important;

      h2,
      .card-text {
        color: $white !important;
        color: var(--white, $white) !important;

        .text-muted {
          color: $off_white !important;
          color: var(--off_white, $off_white) !important;
        }
      }
    }
  }

  h2 {
    font-size: 1.25rem;
    font-weight: bold;

    a {
      color: $base_font !important;
      color: var(--base_font, $base_font) !important;
      border-bottom: 2px solid $base_font !important;
      border-bottom: 2px solid var(--base_font, $base_font) !important;
      text-decoration: none !important;

      .color-scheme-dark & {
        color: $white !important;
        color: var(--white, $white) !important;
        border-bottom: 2px solid $white !important;
        border-bottom: 2px solid var(--white, $white) !important;
        text-decoration: none !important;
      }

      &:hover,
      &:focus {
        color: $hyperlink !important;
        color: var(--hyperlink, $hyperlink) !important;
        border-bottom: 0 !important;

        .color-scheme-dark & {
          color: $hyperlink_darkmode !important;
          color: var(--hyperlink_darkmode, $hyperlink_darkmode) !important;
        }
      }
    }
  }

  .card-body {
    padding: 0;

    .pub-date {
      &:last-of-type {
        margin-bottom: 0;
      }
    }

    p {
      margin: 0 !important;
    }

    // specific to drupal-side only
    .node__content {
      display: flex;
      flex-direction: column;

      > div {
        @include media-breakpoint-up(md) {
          max-width: 100%;
        }

        &:first-of-type {
          margin: 0 $spacer $spacer 0;
        }
      }

      .field--name-field-featured-image {
        order: 1;
      }

      .field--name-field-summary {
        order: 2;
      }
    }
    ////////////////////////
  }

  .content-preview-content {
    @include media-breakpoint-down(xs) {
      order: 2;
    }
  }

  .preview-img {
    margin: 0 0 0 $spacer;
    text-align: right;
    display: flex;
    justify-content: flex-end;

    @include media-breakpoint-down(xs) {
      order: 1;
      margin: 0 0 $spacer 0;
      text-align: center;
      justify-content: center;
    }

    img {
      max-width: 100%;
      // height: fit-content; /* Elvin said to comment this out instead of deleting */
    }
  }

  .right-content & {
    .row {
      flex-direction: column;

      .col {
        order: 2;
      }

      .preview-img {
        order: 1;
        margin: 0 0 $space-one-half 0;
      }
    }
  }
}
  • URL: /components/raw/content_preview/content_preview.scss
  • Filesystem Path: bits/04-components/content_preview/content_preview.scss
  • Size: 3.3 KB
  • Handle: @content_preview
  • Preview:
  • Filesystem Path: bits/04-components/content_preview/content_preview.twig

Display the content preview component.