Softbank

Hero Slide 

<section class="ai-hero-slide ai-component" style="background-image:url('../../images/bitmap/meadow.jpg');">
    <div class="ai-container">
        <div class="ai-wrapper">
            <div class="ai-width-s">
                <div class="ai-w-100 ai-d-flex ai-jc-center">
                    <h1 class="h3 ai-icon-white text-white">What dreams are made of</h1>
                </div>
                <p class="text-white text-center">Our children's dreams are closer to being <br />realized than you might think. Discover more</p>
            </div>
        </div>
    </div>
</section>
 
<section class="ai-hero-slide ai-component" style="background-image:url('{{{path image}}}');">
    <div class="ai-container">
        <div class="ai-wrapper">
            <div class="ai-width-s">
                {{#if title}}
                    <div class="ai-w-100 ai-d-flex ai-jc-center">
                        <h1 class="h3 ai-icon-white text-white">{{{title}}}</h1>
                    </div>
                {{/if}}
                {{#if text}}
                    <p class="text-white text-center">{{{text}}}</p>
                {{/if}}
            </div>
        </div>
    </div>
</section>
 
{
  "title": "What dreams are made of",
  "sub-title": "What dreams are made of",
  "text": "Our children's dreams are closer to being <br/>realized than you might think. Discover more",
  "image": "/images/bitmap/meadow.jpg"
}
  • Content: 
    //  hero

section{
    &.ai-hero-slide{
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: calc(100vh - 80px);
        min-height: 600px;
        @media (min-width: $large) {
            height: calc(100vh - 100px);
        }
        .ai-container{
            height: 100%;
        }
        .ai-wrapper{
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .ai-width-s{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }
}
  • URL: /components/raw/hero-slide/hero-slide.scss
  • Filesystem Path: src/components/02-components/hero-slide/hero-slide.scss
  • Size: 731 Bytes

No notes defined.