Softbank

Article Hero 

<section class="ai-hero ai-component" style="background-image:url('../../images/bitmap/meadow.jpg');">
    <div class="ai-container">
        <div class="ai-wrapper">
            <h1 class="h3 ai-icon-white text-white">What dreams are made of</h1>
            <div class="white-box">
                <h2 class="h4 sub-heading">Vision & Strategy</h2>
                <p>Our children’s dreams are closer to being realized than you might think.</p>
            </div>
        </div>
    </div>
</section>
 
<section class="ai-hero ai-component" style="background-image:url('{{{path image}}}');">
    <div class="ai-container">
        <div class="ai-wrapper">
            {{#if title}}
                <h1 class="h3 ai-icon-white text-white">{{{title}}}</h1>
            {{/if}}
            <div class="white-box">
                {{#if sub-title}}
                    <h2 class="h4 sub-heading">{{{sub-title}}}</h2>
                {{/if}}
                {{#if text}}
                    <p>{{{text}}}</p>
                {{/if}}
            </div>
        </div>
    </div>
</section>
 
{
  "title": "What dreams are made of",
  "sub-title": "Vision & Strategy",
  "text": "Our children’s dreams are closer to being realized than you might think.",
  "image": "/images/bitmap/meadow.jpg"
}
  • Content: 
    //  hero

section{
    &.ai-hero{
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-end;
        height: calc(100vh - 80px);
        min-height: 600px;
        @media (min-width: $large) {
            height: calc(100vh - 100px);
        }
        .ai-container{
            height: 100%;
            height: 75%;
            @media (min-width: $large) {
                height: calc(50% + 25px);
            }
        }
        .ai-wrapper{
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
        }
        .white-box{
            background-color: $white;
            padding: 2rem;
            width: 100%;
            margin-top: 3rem;
            @media (min-width: $large) {
                padding: 2rem 2rem;
            }
        }
        h1{
            margin: 0 auto;
        }
        h2{
            padding-bottom: 0.5rem;
        }
    }
}
  • URL: /components/raw/article-hero/article-hero.scss
  • Filesystem Path: src/components/02-components/article-hero/article-hero.scss
  • Size: 1 KB

No notes defined.