Partystreusel

Image: Figure 

<figure class="image">
    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://source.unsplash.com/1200x800/weekly" />
    <figcaption class="image__caption">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
    </figcaption>
</figure>
 
<figure class="image">
  <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://source.unsplash.com/1200x800/weekly" />
  <figcaption class="image__caption">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
  </figcaption>
</figure>
 
/* No context defined for this component. */
  • Content: 
    img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

.image {
  img {
    margin-bottom: rem(12);
  }
}

.image__caption {
  color: $body__font-color;
  padding: 0 space(1);
  font-size: rem(15);
  line-height: 1.6;
  margin-bottom: rem(12);
}

// LARGE
// ----------------------------------------
@include mq(large) {
  .image {
    img {
      margin-bottom: rem(24);
    }
  }
}
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: patterns/01-atoms/image/_image.scss
  • Size: 398 Bytes

There are no notes for this item.