FAA Pattern Library - Department of Urban and Regional Planning

Image Component: Default 

<div class="image-component image-component--large">
    <div class="image-component__image">
        <figure class="captioned-image">
            <picture class="captioned-image__picture">
                <source srcset="https://picsum.photos/800/650 1280w " sizes="(max-width: 800px) 100vw, 50vw" type="image/webp">
                <source srcset="https://picsum.photos/800/650 1280w " sizes="(max-width: 800px) 100vw, 50vw" type="image/jpeg">
                <img class="captioned-image__image" loading="lazy" src="https://picsum.photos/800/650" alt="placeholder">
            </picture>
        </figure>

    </div>
</div>
 
{% import "bits/macros/imageSource.twig" as imageMacros %}

<div class="image-component image-component--{{ componentSpacing }}">
    <div class="image-component__image">
        {{ imageMacros.createWidthOnlyCrop(component.image, 1280, background) }}
    </div>
</div>
 
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "componentSpacing": "large",
  "component": {
    "type": "image",
    "image": {
      "src": "https://picsum.photos/800/650",
      "altText": "placeholder"
    }
  }
}
  • Content: 
    .image-component
    &--large
        @extends $componentWithMargin

    &--medium
        @extends $componentWithMarginMedium

    &--small
        @extends $componentWithMarginSmall

    &__caption
        @extends $richText
        color greyDarkest
        font-family proximaNova
        font-size 16px
  • URL: /components/raw/image-component/image-component.styl
  • Filesystem Path: components/components/image-component/image-component.styl
  • Size: 308 Bytes

There are no notes for this item.