Accordion

Small hero

Renders a small hero area.

Donec ullamcorper nulla non.

Aenean lacinia bibendum nulla sed consectetur, egestas eget quam.

<!-- hero.blade.php -->
<section id="62becabbd0327" class="c-hero c-hero--small c-hero--overlay" data-uid="62becabbd0322" style="background-image: url('https://picsum.photos/1500/1000?image=1026'); background-position: 50% 30%;">
    
            <div class="c-hero__overlay"></div>
    
     
        <div class="o-container c-hero__container">

            <div class="c-hero__content">

                                    <!-- typography.blade.php  -->
<h1 id="62becabbd0723" class="c-typography c-hero__title c-typography__variant--h1" data-uid="62becabbd071e">
    Donec ullamcorper nulla non.
</h1>                
                
                                    <!-- typography.blade.php  -->
<p id="62becabbd079c" class="c-typography c-hero__body c-typography__variant--p" data-uid="62becabbd0799">
    Aenean lacinia bibendum nulla sed consectetur, egestas eget quam.
</p>                
                
                <div class="c-hero__inner-blocks u-hide-empty"><InnerBlocks /></div>

            </div>

        </div>
    </section>
@hero([
    "image" => "https://picsum.photos/1500/1000?image=1026",
    "size" => "small",
    "overlay" => "neutral",
    "title" => "Donec ullamcorper nulla non.",
    "paragraph" => "Aenean lacinia bibendum nulla sed consectetur, egestas eget quam."
])
@endhero

Normal hero

Renders a normal hero area.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

<!-- hero.blade.php -->
<section id="62becabbd09f3" class="c-hero c-hero--normal c-hero--overlay" data-uid="62becabbd09ef" style="background-image: url('https://picsum.photos/1500/1000?image=1026'); background-position: 50% 30%;">
    
            <div class="c-hero__overlay"></div>
    
     
        <div class="o-container c-hero__container">

            <div class="c-hero__content">

                                    <!-- typography.blade.php  -->
<h1 id="62becabbd0a9c" class="c-typography c-hero__title c-typography__variant--h1" data-uid="62becabbd0a98">
    Donec ullamcorper nulla non metus auctor fringilla.
</h1>                
                                    <!-- typography.blade.php  -->
<span id="62becabbd0aea" class="c-typography c-hero__byline c-typography__variant--h2" data-uid="62becabbd0ae7">
    This is a byline
</span>                
                                    <!-- typography.blade.php  -->
<p id="62becabbd0b2f" class="c-typography c-hero__body c-typography__variant--p" data-uid="62becabbd0b2c">
    Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>                
                
                <div class="c-hero__inner-blocks u-hide-empty"><InnerBlocks /></div>

            </div>

        </div>
    </section>
@hero([
    "image" => "https://picsum.photos/1500/1000?image=1026",
    "size" => "normal",
    "overlay" => "neutral",
    "title" => "Donec ullamcorper nulla non metus auctor fringilla.",
    "byline" => "This is a byline",
    "paragraph" => "Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam."
])
@endhero

Large hero

Renders a large hero area.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

<!-- hero.blade.php -->
<section id="62becabbd0d9a" class="c-hero c-hero--large c-hero--overlay" data-uid="62becabbd0d96" style="background-image: url('https://picsum.photos/1500/1000?image=1026'); background-position: 50% 30%;">
    
            <div class="c-hero__overlay"></div>
    
     
        <div class="o-container c-hero__container">

            <div class="c-hero__content">

                                    <!-- typography.blade.php  -->
<h1 id="62becabbd0e42" class="c-typography c-hero__title c-typography__variant--h1" data-uid="62becabbd0e3e">
    Donec ullamcorper nulla non metus auctor fringilla.
</h1>                
                                    <!-- typography.blade.php  -->
<span id="62becabbd0e8f" class="c-typography c-hero__byline c-typography__variant--h2" data-uid="62becabbd0e8c">
    This is a byline
</span>                
                                    <!-- typography.blade.php  -->
<p id="62becabbd0ed6" class="c-typography c-hero__body c-typography__variant--p" data-uid="62becabbd0ed2">
    Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>                
                
                <div class="c-hero__inner-blocks u-hide-empty"><InnerBlocks /></div>

            </div>

        </div>
    </section>
@hero([
    "image" => "https://picsum.photos/1500/1000?image=1026",
    "size" => "large",
    "overlay" => "vibrant",
    "title" => "Donec ullamcorper nulla non metus auctor fringilla.",
    "byline" => "This is a byline",
    "paragraph" => "Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam."
])
@endhero

Large hero (Without text)

Renders a large hero area, without text. Overlay should not be visible.

<!-- hero.blade.php -->
<section id="62becabbd112d" class="c-hero c-hero--large" data-uid="62becabbd112a" style="background-image: url('https://picsum.photos/1500/1000?image=1027'); background-position: 50% 30%;">
    
    
    </section>
@hero([
    "image" => "https://picsum.photos/1500/1000?image=1027",
    "size" => "large"
])
@endhero

Blade component parameters

Key Default value Type Available values Description
image false boolean - Background image
imageFocus {"top":30,"left":50} array - Where to focus in the background.
size normal string - Ratio (normal, large)
title string - The title text
byline string - The byline text
paragraph string - The body text.
stretch false boolean - Always stretch the hero vertically. Makes the hero the width of the viewport. Requires a centered container.
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Hero/hero.json