OCDE - Pattern Library v1.13.0

Card: College (Example) 

<a class="card card-college" href="#" target="_blank">
    <div class="card-x-map" id="card-x-map1"></div>
    <div class="card-x-body">
        <div class="card-x-title">Cypress College</div>
        <svg>
            <use xlink:href="#icon-externallink"></use>
        </svg>
    </div>
</a>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<script>
    var cardmap1 = L.map('card-x-map1', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(cardmap1);
    // Create the map marker.
    var icon = L.divIcon({
        className: 'mapmarker',
        iconSize: null,
        iconAnchor: [11, 11],
    });
    var marker1 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(cardmap1);
</script>
 
<a class="{{render '@card'}}{{#if modifier}} {{modifier}}{{/if}}" href="#" target="_blank">
  <div class="card-x-map" id="card-x-map1"></div>
  <div class="card-x-body">
    <div class="card-x-title">Cypress College</div>
    <svg>
      <use xlink:href="#icon-externallink"></use>
    </svg>
  </div>
</a>





<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
        integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
        crossorigin=""></script>




<script>
  var cardmap1 = L.map('card-x-map1',{
    zoomControl: false,
    attributionControl: false
  }).setView([33.6412, -117.9188], 10);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
  }).addTo(cardmap1);

  // Create the map marker.
  var icon = L.divIcon({
    className: 'mapmarker',
    iconSize:null,
    iconAnchor: [11, 11],
  });

  var marker1 = L.marker([33.6412, -117.9188],{icon: icon}).addTo(cardmap1);

</script>
 
{
  "modifier": "card-college"
}
  • Content: 
    .card {
  border: 1px solid $color-interactive1;
  background-color: $color-light1;
  display: block;
  padding: $gridspacing;
  padding-bottom: 0;
  text-align: left;
  max-width: 264px;
  height: 100%;

  .card-x-title {
    @include textstyle-h2-compact;
    color: $color-interactive1;
    padding-right: $gridspacing * 2;
  }

  .card-x-body {
    padding: ($gridspacing * 2.5) $gridspacing;

    svg {
      fill: $color-interactive1;
      flex-shrink: 0;
      height: 18px;
      width: 18px;
    }
  }

  .card-x-map {
    border-radius: $border-radius;
    height: 180px;
    pointer-events: none;
    width: 248px;
  }

  &:hover {
    .card-x-title {
      text-decoration: underline;
    }
  }
}


.card-college {
  .card-x-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
}


.card-highschool {
  .card-x-title {
    margin-bottom: $gridspacing / 2;
  }

  .card-x-subtitle {
    // Since the card is a link this text changes color for active and visited, it should always be black.
    color: $color-dark2 !important;
  }
}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: src/scss/02-modules/card/_card.scss
  • Size: 1.1 KB

No notes defined.