OCDE - Pattern Library v1.13.0

Grid 

<div class="l-grid">
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-agriculture" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/agriculture.jpg" alt="Agriculture">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-agriculture"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Agriculture & Natural Resources</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-arts" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/arts.jpg" alt="Arts">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-arts"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Arts, Media & Entertainment</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-construction" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/construction.jpg" alt="Construction">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-construction"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Building & Construction Trades</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-education" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/education.jpg" alt="Education">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-education"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Education Child Development & Family Services</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-energy" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/energy.jpg" alt="Energy">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-energy"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Energy, Environment & Utilities</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-engineering" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/engineering.jpg" alt="Engineering">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-engineering"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Engineering & Architecture</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-fashion" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/fashion.jpg" alt="Fashion">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-fashion"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Fashion & Interior Design</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-communication" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/communication.jpg" alt="Communication">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-communication"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Information & Communication Technologies</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-business" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/business.jpg" alt="Business">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-business"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Business & Finance</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-hospitality" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/hospitality.jpg" alt="Hospitality">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-hospitality"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Hospitality, Tourism & Recreation</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-health" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/health.jpg" alt="Health">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-health"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Health Science & Medical Technology</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-manufacturing" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/manufacturing.jpg" alt="Manufacturing">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-manufacturing"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Manufacturing & Product Development</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-transportation" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/transportation.jpg" alt="Transportation">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-transportation"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Transportation</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-publicservices" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/publicservices.jpg" alt="Public Services">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-publicservices"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Public Services</span>
            </div>
        </a>
    </div>
    <div class="l-grid-x-griditem">
        <a class="cardimage cardimage-sales" href="#">
            <div class="cardimage-x-top">
                <img src="../../assets/images/sales.jpg" alt="Sales">
                <svg class="cardimage-x-icon">
                    <use xlink:href="#cardimageicon-sales"></use>
                </svg>
            </div>
            <div class="cardimage-x-bottom">
                <span class="cardimage-x-text">Marketing, Sales & Service</span>
            </div>
        </a>
    </div>
</div>
 
<div class="l-grid{{#if modifier}} {{modifier}}{{/if}}">
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-agriculture" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/agriculture.jpg'}}" alt="Agriculture">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-agriculture"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Agriculture & Natural Resources</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-arts" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/arts.jpg'}}" alt="Arts">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-arts"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Arts, Media & Entertainment</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-construction" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/construction.jpg'}}" alt="Construction">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-construction"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Building & Construction Trades</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-education" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/education.jpg'}}" alt="Education">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-education"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Education Child Development & Family Services</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-energy" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/energy.jpg'}}" alt="Energy">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-energy"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Energy, Environment & Utilities</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-engineering" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/engineering.jpg'}}" alt="Engineering">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-engineering"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Engineering & Architecture</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-fashion" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/fashion.jpg'}}" alt="Fashion">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-fashion"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Fashion & Interior Design</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-communication" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/communication.jpg'}}" alt="Communication">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-communication"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Information & Communication Technologies</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-business" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/business.jpg'}}" alt="Business">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-business"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Business & Finance</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-hospitality" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/hospitality.jpg'}}" alt="Hospitality">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-hospitality"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Hospitality, Tourism & Recreation</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-health" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/health.jpg'}}" alt="Health">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-health"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Health Science & Medical Technology</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-manufacturing" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/manufacturing.jpg'}}" alt="Manufacturing">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-manufacturing"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Manufacturing & Product Development</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-transportation" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/transportation.jpg'}}" alt="Transportation">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-transportation"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Transportation</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-publicservices" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/publicservices.jpg'}}" alt="Public Services">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-publicservices"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Public Services</span>
      </div>
    </a>
  </div>
  <div class="l-grid-x-griditem">
    <a class="{{render '@cardimage'}} cardimage-sales" href="#">
      <div class="cardimage-x-top">
        <img src="{{path '/assets/images/sales.jpg'}}" alt="Sales">
        <svg class="cardimage-x-icon">
          <use xlink:href="#cardimageicon-sales"></use>
        </svg>
      </div>
      <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Marketing, Sales & Service</span>
      </div>
    </a>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    
.l-grid {
  display: flex;
  flex-wrap: wrap;
  padding: ($gridspacing * 2) $gridspacing $gridspacing;

  .l-grid-x-griditem {
    display: flex;
    justify-content: center;
    padding: 0 8px;
    padding-bottom: $gridspacing * 2;
    width: 100%;
  }

  @media (min-width: $media-mobilelarge) {

    .l-grid-x-griditem {
      width: 50%;
    }
  }

  @media (min-width: $media-tablet) {

    padding-left: $gridspacing * 4;
    padding-right: $gridspacing * 4;

    .l-grid-x-griditem {
      width: 33.333333%
    }
  }

  @media (min-width: $media-desktop) {
    padding-top: $gridspacing * 3;
    padding-left: $gridspacing * 3.5;
    padding-right: $gridspacing * 3.5;

    .l-grid-x-griditem {
      padding: 0 12px;
      padding-bottom: $gridspacing * 3;
      width: 25%
    }
  }

  @media (min-width: $media-hd) {
    padding-left: calc(50vw - #{$container-maxwidth / 2} - 12px);
    padding-right: calc(50vw - #{$container-maxwidth / 2} - 12px);

    .l-grid-x-griditem {
      width: 20%
    }
  }

}
  • URL: /components/raw/l-grid/_l-grid.scss
  • Filesystem Path: src/scss/03-layouts/l-grid/_l-grid.scss
  • Size: 1 KB

No notes defined.