Design Seeds Boiler - Component Library

Hero: Sub 

<div class="hero-sub hero-sub__wrap">
    <div class="hero-sub__inner l-gird-section">
        <div class="hero-sub__left">
            <h1 class="hero-sub__title">About Us</h1>
        </div>

        <div class="hero-sub__right">
            <img src="/assets/img/ph-banner.png" alt="" class="hero-sub__img">
        </div>
    </div>
</div>
 
<div class="hero-sub hero-sub__wrap">
    <div class="hero-sub__inner l-gird-section">
        <div class="hero-sub__left">
            <h1 class="hero-sub__title">About Us</h1>
        </div>
    
        <div class="hero-sub__right">
            <img src="/assets/img/ph-banner.png" alt="" class="hero-sub__img">
        </div>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .hero {

    &__wrap {
        background-color: $color-main;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    &__inner {
        @include container-inner-styles;
        
        height: 285px;
        @include mappy-bp(small) {
            
            height: auto;
        }
    }

    &__img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        @include mappy-bp(small) {
            object-fit: none;
            height: auto;
        }
    }
}


.hero-sub {
    color:#ffffff;
    &__wrap {
        background-color: $color-main;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        @include mappy-bp(small) {

        }
    }

    &__img {
        display: block;
        max-width: 100%;
    }
    &__title {
        padding: $elem-pad-sm;
        margin: 0;
        @include mappy-bp(small) {
           // padding: 0;
            margin-bottom: rem(50);
        }
        @include mappy-bp(max) {
            padding: 0;
        }
    }
    &__left {
        grid-column: span 12;
        display: flex;
        align-items: flex-end;
        @include mappy-bp(small) {
            grid-column: span 5;
        }
    }
    &__right {
        display: none;
        grid-column: span 7;
        @include mappy-bp(small) {
            display: block;
        }
    }
    &__inner {
        

    }
}
  • URL: /components/raw/hero/hero.scss
  • Filesystem Path: components/07-hero/hero.scss
  • Size: 1.5 KB

No notes defined.