College of Business Style Guide

Images: Figure 

<figure class="figure image">
    <a href="https://www.google.com">
        <img src="/images/maxresdefault.jpg" alt="hot lava" />
    </a>
    <figcaption class="figure-caption">Me mind on fire -- Me soul on fire -- Feeling hot hot hot - Buster Poindexter</figcaption>
</figure>
 
<figure class="figure image">
    <a href="{{ img_url }}">
        <img src="{{ img_src }}" alt="{{ img_alt }}" />
    </a>
    <figcaption class="figure-caption">{{ img_caption }}</figcaption>
</figure>
 
{
  "img_src": "/images/maxresdefault.jpg",
  "img_alt": "hot lava",
  "img_url": "https://www.google.com",
  "img_caption": "Me mind on fire -- Me soul on fire -- Feeling hot hot hot - Buster Poindexter"
}
  • Content: 
    @mixin img {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.image img {
    @include img;
}

.favicon img {
    width: inherit;
}

.figure {
    margin: 0;
}

.lehigh-logo {
    background-color: $lehigh-brown;
    padding: 0 $space 0 0;
    margin: 0 $space 0 0;
    border-right: 1px solid $white;
    flex-grow: 2;
    max-width: 180px;

    @media only screen and (min-width: $break-desktop) {
        max-width: 225px;
        min-width: 150px;
    }

  .print {
    display: none;
  }

  .sr-only {
    color: $white;
  }
}

.align-right {
  img {
    margin: $space-three-quarter 0 $space-three-quarter $space-three-quarter;
  }
}

.align-left {
  img {
    margin: $space-three-quarter $space-three-quarter $space-three-quarter 0;
  }
}
  • URL: /components/raw/images/images.scss
  • Filesystem Path: components/01-elements/05-images/images.scss
  • Size: 778 Bytes

No notes defined.