MIUN - Design Library

Hero 

<figure class="hero-image" style="background-image:url(https://picsum.photos/900/600);">
    <img src="https://picsum.photos/900/600" alt="" class="sr-only">
</figure>
 
<figure class="hero-image" style="background-image:url({{this.imageUrl}});">
    <img src="{{this.imageUrl}}" alt="{{this.imageAlt}}" class="sr-only">
</figure>
 
{
  "imageUrl": "https://picsum.photos/900/600",
  "imageAlt": ""
}
  • Content: 
    .hero-image {
    height: 200px;
    width: 100%;
    margin: -$md-space 0 $md-space 0;
    background-size: cover;
    background-position: center center;

    @include media-breakpoint-up(sm) {
        height: 300px;
    }

    @include media-breakpoint-up(md) {
        height: 400px;
    }

    @include media-breakpoint-up(lg) {
        height: 600px;
    }
}
  • URL: /components/raw/hero/hero.scss
  • Filesystem Path: src\components\01-global_components\hero\hero.scss
  • Size: 382 Bytes

There are no notes for this item.