OCDE - Pattern Library v1.13.0

Cards: Default (Example) 

<div class="l-cards">
    <a class="card card-college" href="#">
        <div class="card-x-image">
            <img src="https://picsum.photos/248/180/?random" alt="Image Description">
        </div>
        <div class="card-x-body">
            <div class="card-x-title">Cypress College</div>
            <div class="card-x-subtitle">10 High Schools</div>
            <svg>
                <use xlink:href="#icon-externallink"></use>
            </svg>
        </div>
    </a>
    <a class="card card-college" href="#">
        <div class="card-x-image">
            <img src="https://picsum.photos/248/180/?random" alt="Image Description">
        </div>
        <div class="card-x-body">
            <div class="card-x-title">Cypress College</div>
            <div class="card-x-subtitle">10 High Schools</div>
            <svg>
                <use xlink:href="#icon-externallink"></use>
            </svg>
        </div>
    </a>
    <a class="card card-college" href="#">
        <div class="card-x-image">
            <img src="https://picsum.photos/248/180/?random" alt="Image Description">
        </div>
        <div class="card-x-body">
            <div class="card-x-title">Cypress College</div>
            <div class="card-x-subtitle">10 High Schools</div>
            <svg>
                <use xlink:href="#icon-externallink"></use>
            </svg>
        </div>
    </a>
    <a class="card card-college" href="#">
        <div class="card-x-image">
            <img src="https://picsum.photos/248/180/?random" alt="Image Description">
        </div>
        <div class="card-x-body">
            <div class="card-x-title">Cypress College</div>
            <div class="card-x-subtitle">10 High Schools</div>
            <svg>
                <use xlink:href="#icon-externallink"></use>
            </svg>
        </div>
    </a>
    <a class="card card-college" href="#">
        <div class="card-x-image">
            <img src="https://picsum.photos/248/180/?random" alt="Image Description">
        </div>
        <div class="card-x-body">
            <div class="card-x-title">Cypress College</div>
            <div class="card-x-subtitle">10 High Schools</div>
            <svg>
                <use xlink:href="#icon-externallink"></use>
            </svg>
        </div>
    </a>
    <a class="card card-college" href="#">
        <div class="card-x-image">
            <img src="https://picsum.photos/248/180/?random" alt="Image Description">
        </div>
        <div class="card-x-body">
            <div class="card-x-title">Cypress College</div>
            <div class="card-x-subtitle">10 High Schools</div>
            <svg>
                <use xlink:href="#icon-externallink"></use>
            </svg>
        </div>
    </a>
    <a class="card card-college" href="#">
        <div class="card-x-image">
            <img src="https://picsum.photos/248/180/?random" alt="Image Description">
        </div>
        <div class="card-x-body">
            <div class="card-x-title">Cypress College</div>
            <div class="card-x-subtitle">10 High Schools</div>
            <svg>
                <use xlink:href="#icon-externallink"></use>
            </svg>
        </div>
    </a>
</div>
 
<div class="{{render '@l-cards'}}">
  <a class="{{render '@card--college'}}" href="#">
    <div class="card-x-image">
      <img src="https://picsum.photos/248/180/?random" alt="Image Description">
    </div>
    <div class="card-x-body">
      <div class="card-x-title">Cypress College</div>
      <div class="card-x-subtitle">10 High Schools</div>
      <svg>
        <use xlink:href="#icon-externallink"></use>
      </svg>
    </div>
  </a>
  <a class="{{render '@card--college'}}" href="#">
    <div class="card-x-image">
      <img src="https://picsum.photos/248/180/?random" alt="Image Description">
    </div>
    <div class="card-x-body">
      <div class="card-x-title">Cypress College</div>
      <div class="card-x-subtitle">10 High Schools</div>
      <svg>
        <use xlink:href="#icon-externallink"></use>
      </svg>
    </div>
  </a>
  <a class="{{render '@card--college'}}" href="#">
    <div class="card-x-image">
      <img src="https://picsum.photos/248/180/?random" alt="Image Description">
    </div>
    <div class="card-x-body">
      <div class="card-x-title">Cypress College</div>
      <div class="card-x-subtitle">10 High Schools</div>
      <svg>
        <use xlink:href="#icon-externallink"></use>
      </svg>
    </div>
  </a>
  <a class="{{render '@card--college'}}" href="#">
    <div class="card-x-image">
      <img src="https://picsum.photos/248/180/?random" alt="Image Description">
    </div>
    <div class="card-x-body">
      <div class="card-x-title">Cypress College</div>
      <div class="card-x-subtitle">10 High Schools</div>
      <svg>
        <use xlink:href="#icon-externallink"></use>
      </svg>
    </div>
  </a>
  <a class="{{render '@card--college'}}" href="#">
    <div class="card-x-image">
      <img src="https://picsum.photos/248/180/?random" alt="Image Description">
    </div>
    <div class="card-x-body">
      <div class="card-x-title">Cypress College</div>
      <div class="card-x-subtitle">10 High Schools</div>
      <svg>
        <use xlink:href="#icon-externallink"></use>
      </svg>
    </div>
  </a>
  <a class="{{render '@card--college'}}" href="#">
    <div class="card-x-image">
      <img src="https://picsum.photos/248/180/?random" alt="Image Description">
    </div>
    <div class="card-x-body">
      <div class="card-x-title">Cypress College</div>
      <div class="card-x-subtitle">10 High Schools</div>
      <svg>
        <use xlink:href="#icon-externallink"></use>
      </svg>
    </div>
  </a>
  <a class="{{render '@card--college'}}" href="#">
    <div class="card-x-image">
      <img src="https://picsum.photos/248/180/?random" alt="Image Description">
    </div>
    <div class="card-x-body">
      <div class="card-x-title">Cypress College</div>
      <div class="card-x-subtitle">10 High Schools</div>
      <svg>
        <use xlink:href="#icon-externallink"></use>
      </svg>
    </div>
  </a>
</div>
 
/* No context defined. */
  • Content: 
    .l-cards {
  display: flex;
  -webkit-overflow-scrolling: touch; // Required for mobile safari and scroll-snap
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 $gridspacing;
  padding: $gridspacing $gridspacing ($gridspacing * 3);
  will-change: transform; // Forces layer, optimizes scroll

  // This selects the first child of l-cards which is app-card.
  > * {
    // display: flex;

    &:not(:last-child) {

        margin-right: $gridspacing;

    }

    // Solves the padding-right problem,
    // https://blog.alexandergottlieb.com/overflow-scroll-and-the-right-padding-problem-a-css-only-solution-6d442915b3f4
    &:last-child {

      :after {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 1px;
        top: 0;
        right: -8px;
      }
    }
  }

  a {
    position: relative;
    scroll-snap-align: start;
  }
}
  • URL: /components/raw/l-cards/_l-cards.scss
  • Filesystem Path: src/scss/03-layouts/l-cards/_l-cards.scss
  • Size: 914 Bytes

No notes defined.