<div class="maintenance-banner">
    <img class="maintenance-banner__image u-object-fit-cover" src="/assets/images/maintenance-banner.jpg" alt="Maintenance banner image">
</div>
{{#if image}}
<div class="maintenance-banner">
  <img class="maintenance-banner__image u-object-fit-cover" src="{{image.src}}" alt="{{image.alt}}">
</div>
{{/if}}
{
  "image": {
    "src": "/assets/images/maintenance-banner.jpg",
    "alt": "Maintenance banner image"
  }
}
  • Content:
    .maintenance-banner {
      position: relative;
      height: map-get($maintenance-banner-height, sm);
    
      @include breakpoint($breakpoint-md) {
        height: map-get($maintenance-banner-height, md);
      }
    
      @include breakpoint($breakpoint-xl) {
        height: map-get($maintenance-banner-height, xl);
      }
    }
    
    // Aligns the image to the right to ensure the sign is always visible.
    .maintenance-banner__image {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: auto;
      max-width: none;
      height: 100%;
    }
    
  • URL: /components/raw/maintenance-banner/maintenance-banner.scss
  • Filesystem Path: src/components/02-components/maintenance/maintenance-banner/maintenance-banner.scss
  • Size: 502 Bytes

There are no notes for this item.