Accordion

Small hero

Donec ullamcorper nulla non.

Aenean lacinia bibendum nulla sed consectetur, egestas eget quam. 

<!-- hero.blade.php -->
<section class="c-hero c-hero--image c-hero--default c-hero--small c-hero--apply-rounded-corners c-hero--apply-shadows c-hero--overlay" role="region" aria-label="Hero" data-uid="66220fda1ebd6">
    <div class="c-hero__image" style="background-image: url('https://picsum.photos/id/1026/1500/1000');" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
    </div>
            <div class="c-hero__overlay"></div>
    
    
    
        <div class="o-container c-hero__container">
            
            
            <div class="c-hero__content" style="">
                
    
                    <!-- typography.blade.php  (hasSeenH1)  original: h1 -->
<h1 class="c-typography c-hero__title c-typography__variant--h1" data-uid="66220fda1ecac">
    Donec ullamcorper nulla non.
</h1>    
    
                <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="66220fda1ece9">
    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/id/1026/1500/1000",
    "size" => "small",
    "overlay" => "neutral",
    "title" => "Donec ullamcorper nulla non.",
    "paragraph" => "Aenean lacinia bibendum nulla sed consectetur, egestas eget quam."
])
@endhero

Normal hero

Donec ullamcorper nulla non metus auctor fringilla.

This is a byline

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 class="c-hero c-hero--image c-hero--default c-hero--normal c-hero--apply-rounded-corners c-hero--apply-shadows c-hero--overlay" role="region" aria-label="Hero" data-uid="66220fda1edab">
    <div class="c-hero__image" style="background-image: url('https://picsum.photos/id/1026/1500/1000');" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
    </div>
            <div class="c-hero__overlay"></div>
    
    
    
        <div class="o-container c-hero__container">
            
            
            <div class="c-hero__content" style="">
                
    
                    <!-- typography.blade.php  (hasSeenH1)  original: h1 -->
<h2 class="c-typography c-hero__title c-typography__variant--h1" data-uid="66220fda1ee0a">
    Donec ullamcorper nulla non metus auctor fringilla.
</h2>    
                <!-- typography.blade.php  (hasSeenH1)  original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="66220fda1ee39">
    This is a byline
</span>    
                <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="66220fda1ee62">
    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/id/1026/1500/1000",
    "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

Donec ullamcorper nulla non metus auctor fringilla.

This is a byline

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 class="c-hero c-hero--image c-hero--default c-hero--large c-hero--apply-rounded-corners c-hero--apply-shadows c-hero--overlay" role="region" aria-label="Hero" data-uid="66220fda1ef17">
    <div class="c-hero__image" style="background-image: url('https://picsum.photos/id/1026/1500/1000');" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
    </div>
            <div class="c-hero__overlay"></div>
    
    
    
        <div class="o-container c-hero__container">
            
            
            <div class="c-hero__content" style="">
                
    
                    <!-- typography.blade.php  (hasSeenH1)  original: h1 -->
<h2 class="c-typography c-hero__title c-typography__variant--h1" data-uid="66220fda1ef70">
    Donec ullamcorper nulla non metus auctor fringilla.
</h2>    
                <!-- typography.blade.php  (hasSeenH1)  original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="66220fda1efad">
    This is a byline
</span>    
                <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="66220fda1efe9">
    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/id/1026/1500/1000",
    "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) 

<!-- hero.blade.php -->
<section class="c-hero c-hero--image c-hero--default c-hero--large c-hero--apply-rounded-corners c-hero--apply-shadows" role="region" aria-label="Hero" data-uid="66220fda1f095">
    <div class="c-hero__image" style="background-image: url('https://picsum.photos/id/1027/1500/1000');" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
    </div>
    
    
    </section>
@hero([
    "image" => "https://picsum.photos/id/1027/1500/1000",
    "size" => "large"
])
@endhero

With content background color

Donec ullamcorper nulla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. 

<!-- hero.blade.php -->
<section class="c-hero c-hero--image c-hero--default c-hero--normal c-hero--apply-rounded-corners c-hero--apply-shadows c-hero--has-content-background-color" role="region" aria-label="Hero" data-uid="66220fda1f162">
    <div class="c-hero__image" style="background-image: url('https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI');" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
    </div>
    
    
    
        <div class="o-container c-hero__container">
            
            
            <div class="c-hero__content" style="background-color: #FFFFFF;">
                
    
                    <!-- typography.blade.php  (hasSeenH1)  original: h1 -->
<h2 class="c-typography c-hero__title c-typography__variant--h1" data-uid="66220fda1f1be">
    Donec ullamcorper nulla.
</h2>    
                <!-- typography.blade.php  (hasSeenH1)  original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="66220fda1f1ed">
    This is a byline
</span>    
                <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="66220fda1f217">
    Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
</p>    
    
    
    
    <div class="c-hero__inner-blocks u-hide-empty"><InnerBlocks /></div>

</div>
        </div>
    </section>
@hero([
    "image" => "https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI",
    "size" => "normal",
    "overlay" => "neutral",
    "title" => "Donec ullamcorper nulla.",
    "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.",
    "contentBackgroundColor" => "#FFFFFF"
])
@endhero

Content alignment

Donec ullamcorper nulla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. 

<!-- hero.blade.php -->
<section class="c-hero c-hero--image c-hero--default c-hero--normal c-hero--content-vertical__center c-hero--content-horizontal__center c-hero--apply-rounded-corners c-hero--apply-shadows c-hero--has-content-background-color" role="region" aria-label="Hero" data-uid="66220fda1f2ce">
    <div class="c-hero__image" style="background-image: url('https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI');" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
    </div>
    
    
    
        <div class="o-container c-hero__container">
            
            
            <div class="c-hero__content" style="background-color: #FFFFFF;">
                
    
                    <!-- typography.blade.php  (hasSeenH1)  original: h1 -->
<h2 class="c-typography c-hero__title c-typography__variant--h1" data-uid="66220fda1f328">
    Donec ullamcorper nulla.
</h2>    
                <!-- typography.blade.php  (hasSeenH1)  original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="66220fda1f355">
    This is a byline
</span>    
                <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="66220fda1f397">
    Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
</p>    
    
    
    
    <div class="c-hero__inner-blocks u-hide-empty"><InnerBlocks /></div>

</div>
        </div>
    </section>
@hero([
    "image" => "https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI",
    "size" => "normal",
    "overlay" => "neutral",
    "title" => "Donec ullamcorper nulla.",
    "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.",
    "contentBackgroundColor" => "#FFFFFF",
    "contentAlignmentHorizontal" => "center",
    "contentAlignmentVertical" => "center",
])
@endhero

Text alignment

Donec ullamcorper nulla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. 

<!-- hero.blade.php -->
<section class="c-hero c-hero--image c-hero--default c-hero--normal c-hero--content-vertical__center c-hero--content-horizontal__right c-hero--text-align__right c-hero--apply-rounded-corners c-hero--apply-shadows c-hero--has-content-background-color" role="region" aria-label="Hero" data-uid="66220fda1f464">
    <div class="c-hero__image" style="background-image: url('https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI');" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
    </div>
    
    
    
        <div class="o-container c-hero__container">
            
            
            <div class="c-hero__content" style="background-color: #FFFFFF;">
                
    
                    <!-- typography.blade.php  (hasSeenH1)  original: h1 -->
<h2 class="c-typography c-hero__title c-typography__variant--h1" data-uid="66220fda1f4c5">
    Donec ullamcorper nulla.
</h2>    
                <!-- typography.blade.php  (hasSeenH1)  original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="66220fda1f4f5">
    This is a byline
</span>    
                <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="66220fda1f521">
    Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
</p>    
    
    
    
    <div class="c-hero__inner-blocks u-hide-empty"><InnerBlocks /></div>

</div>
        </div>
    </section>
@hero([
    "image" => "https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI",
    "size" => "normal",
    "overlay" => "neutral",
    "title" => "Donec ullamcorper nulla.",
    "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.",
    "textColor" => false,
    "contentBackgroundColor" => "#FFFFFF",
    "textAlignment" => "right",
    "contentAlignmentHorizontal" => "right",
    "contentAlignmentVertical" => "center",
])
@endhero

Button

Donec ullamcorper nulla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Button 
<!-- hero.blade.php -->
<section class="c-hero c-hero--image c-hero--default c-hero--normal c-hero--apply-rounded-corners c-hero--apply-shadows c-hero--has-content-background-color" role="region" aria-label="Hero" data-uid="66220fda1f5ed">
    <div class="c-hero__image" style="background-image: url('https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI');" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
    </div>
    
    
    
        <div class="o-container c-hero__container">
            
            
            <div class="c-hero__content" style="background-color: #FFFFFF;">
                
    
                    <!-- typography.blade.php  (hasSeenH1)  original: h1 -->
<h2 class="c-typography c-hero__title c-typography__variant--h1" data-uid="66220fda1f64b">
    Donec ullamcorper nulla.
</h2>    
                <!-- typography.blade.php  (hasSeenH1)  original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="66220fda1f67b">
    This is a byline
</span>    
                <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="66220fda1f6a7">
    Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
</p>    
    
                <a class="c-button u-margin__top--2 c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" href="#" aria-label="Button" data-uid="66220fda1f705">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                Button
            </span>
        
    </span> </a>    
    
    <div class="c-hero__inner-blocks u-hide-empty"><InnerBlocks /></div>

</div>
        </div>
    </section>
@hero([
    "image" => "https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI",
    "size" => "normal",
    "overlay" => "neutral",
    "title" => "Donec ullamcorper nulla.",
    "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.",
    "contentBackgroundColor" => "#FFFFFF",
    "buttonArgs" => ["href" => "#", "text" => "Button", "color" => "primary", "classList" => ["u-margin__top--2"]]
])
@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.
video false boolean - Display a video as a background. This option will replace image.
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.
animation false boolean - Name of the animation
ariaLabel Hero string - Label provided for accessibility tools such as screen readers
heroView default string - Select which view to display
customHeroData false boolean - An array containing the custom data for the selected view (heroView).
meta false boolean - The meta text
background false boolean - Image or a color
textColor string - The color of the text.
textAlignment left string - Alignment texts. Supports "left", "center" and "right".
contentBackgroundColor string - The background color for texts in the content area.
contentAlignmentVertical bottom string - Vertical placement of the content: top|center|bottom.
contentAlignmentHorizontal left string - -
contentApplyRoundedCorners true boolean - Apply rounded corners to content if contentBackgroundColor is set.
contentApplyShadows true boolean - Apply shadows to content if contentBackgroundColor is set.
buttonArgs [] array - Add a @button by passing @button component arguments. If button is treated as a link, all te text elements in the content gets wrapped with this link.
poster false boolean - Poster image for the video
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: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Hero/hero.json