@hero([
"video" => true,
"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
Renders a normal hero area.
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.
<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" aria-label="Hero" data-uid="6aa53c2f1fb13" data-component=
"hero">
<div class="c-hero__image" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
<!-- image.blade.php -->
<figure class="c-image c-image--cover" data-uid="6aa53c2f1fb6e" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/id/1026/1500/1000" alt="" />
</div>
</figure>
</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="6aa53c2f1fc07" data-component="typography">
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="6aa53c2f1fc3d" data-component="typography">This is a byline</span>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="6aa53c2f1fc6a" data-component="typography">
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>
</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
Renders a large hero area.
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.
<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" aria-label="Hero" data-uid="6aa53c2f1fd39" data-component=
"hero">
<div class="c-hero__image" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
<!-- image.blade.php -->
<figure class="c-image c-image--cover" data-uid="6aa53c2f1fd8e" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/id/1026/1500/1000" alt="" />
</div>
</figure>
</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="6aa53c2f1fe19" data-component="typography">
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="6aa53c2f1fe52" data-component="typography">This is a byline</span>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="6aa53c2f1fe7f" data-component="typography">
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>
</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)
Renders a large hero area, without text. Overlay should not be visible.
Renders a hero with a background color for the content area.
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.
<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" aria-label="Hero" data-uid=
"6aa53c2f200a3" data-component="hero">
<div class="c-hero__image" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg?hmac=jtdb98zcenyiyfc6enzwumlcztz7yl2hzbmgw8tcfui c-image--cover" data-uid="6aa53c2f200f7" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI" alt="" />
</div>
</figure>
</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="6aa53c2f20183" data-component="typography">
Donec ullamcorper nulla.
</h2><!-- typography.blade.php (hasSeenH1) original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="6aa53c2f201b6" data-component="typography">This is a byline</span>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="6aa53c2f201e3" data-component="typography">
Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</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
Renders a hero with a content aligned horizontal "center" and vertical "center".
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.
<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"
aria-label="Hero" data-uid="6aa53c2f202c7" data-component="hero">
<div class="c-hero__image" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg?hmac=jtdb98zcenyiyfc6enzwumlcztz7yl2hzbmgw8tcfui c-image--cover" data-uid="6aa53c2f2031b" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI" alt="" />
</div>
</figure>
</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="6aa53c2f203ab" data-component="typography">
Donec ullamcorper nulla.
</h2><!-- typography.blade.php (hasSeenH1) original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="6aa53c2f203db" data-component="typography">This is a byline</span>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="6aa53c2f20409" data-component="typography">
Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</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
Renders a hero with text aligned center.
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.
<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"
aria-label="Hero" data-uid="6aa53c2f204d9" data-component="hero">
<div class="c-hero__image" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg?hmac=jtdb98zcenyiyfc6enzwumlcztz7yl2hzbmgw8tcfui c-image--cover" data-uid="6aa53c2f2052f" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI" alt="" />
</div>
</figure>
</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="6aa53c2f205b1" data-component="typography">
Donec ullamcorper nulla.
</h2><!-- typography.blade.php (hasSeenH1) original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="6aa53c2f205dc" data-component="typography">This is a byline</span>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="6aa53c2f20603" data-component="typography">
Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</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
Renders a hero with a 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.
<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" aria-label="Hero" data-uid=
"6aa53c2f206d9" data-component="hero">
<div class="c-hero__image" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
<!-- image.blade.php -->
<figure class="c-image c-image--type-jpg?hmac=jtdb98zcenyiyfc6enzwumlcztz7yl2hzbmgw8tcfui c-image--cover" data-uid="6aa53c2f2072f" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://fastly.picsum.photos/id/1026/1500/1000.jpg?hmac=Jtdb98ZCenyIyfC6ENZwUMLCzTz7Yl2hZBmGW8TCfUI" alt="" />
</div>
</figure>
</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="6aa53c2f207b8" data-component="typography">
Donec ullamcorper nulla.
</h2><!-- typography.blade.php (hasSeenH1) original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="6aa53c2f207e3" data-component="typography">This is a byline</span>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="6aa53c2f2080a" data-component="typography">
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" href="#" target="_top" aria-label="Button" data-uid="6aa53c2f2087d" data-component=
"button"><span class="c-button__label"><span class="c-button__label-text">Button</span></span></a>
</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
Multi column hero
Renders a normal multi column area.
This is a title
Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.
<section class="c-hero c-hero--image c-hero--twoColumn c-hero--normal c-hero--apply-rounded-corners c-hero--apply-shadows" aria-label="Hero" data-uid="6aa53c2f209fc" data-component="hero">
<div class="c-hero__background" style=""></div>
<div class="o-container">
<!-- group.blade.php -->
<div class="c-group c-hero__content o-grid u-flex-direction--row--reverse c-group--horizontal c-group--flex-wrap-wrap" data-uid="6aa53c2f20c8a" data-component="group">
<div class="c-hero__group c-hero__image-container">
<!-- image.blade.php -->
<figure class="c-image u-margin__bottom--0 c-hero__group-image c-image--cover" data-uid="6aa53c2f20b9b" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/id/1026/1500/1000" alt="" />
</div>
</figure>
</div>
<div class="c-hero__group c-hero__content-container">
<!-- group.blade.php -->
<div class="c-group c-hero__group-content c-group--vertical c-group--justify-content-center" data-uid="6aa53c2f20c52" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-typography__variant--h1" data-uid="6aa53c2f2095f" data-component="typography">
This is a title
</p><!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-typography__variant--body" data-uid="6aa53c2f20990" data-component="typography">
Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper
nulla non metus auctor fringilla.
</p>
</div>
</div>
</div>
</div>
</section>
@hero([
"image" => "https://picsum.photos/id/1026/1500/1000",
'heroView' => 'twoColumn'
])
@slot('content')
@typography([
'variant' => 'h1'
])
This is a title
@endtypography
@typography([
'variant' => 'body'
])
Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.
@endtypography
@endslot
@endhero
Hero with call to actions
Renders a normal hero area with call to actions.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
@hero([
"image" => "https://picsum.photos/id/1026/1500/1000",
"size" => "normal",
"heroView" => "callToActions",
"title" => "Donec ullamcorper nulla non metus auctor fringilla.",
"paragraph" => "Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.",
"customHeroData" => [
"mediaFirst" => true
],
"buttonArgs" => [
["href" => "#", "text" => "Primary action", "color" => "primary"],
["href" => "#", "text" => "Secondary action", "color" => "secondary"]
]
])
@endhero
Stretch hero
Renders a hero with stretch enabled, making it fill the full viewport height.
Donec ullamcorper nulla non metus auctor fringilla.
This is a byline
Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
<section class="c-hero c-hero--stretch c-hero--image c-hero--default c-hero--normal c-hero--apply-rounded-corners c-hero--apply-shadows c-hero--overlay" aria-label="Hero" data-uid="6aa53c2f2108a"
data-component="hero">
<div class="c-hero__image" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
<!-- image.blade.php -->
<figure class="c-image c-image--cover" data-uid="6aa53c2f210d6" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/id/1026/1500/1000" alt="" />
</div>
</figure>
</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="6aa53c2f21155" data-component="typography">
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="6aa53c2f21182" data-component="typography">This is a byline</span>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="6aa53c2f211aa" data-component="typography">
Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</div>
</div>
</section>
@hero([
"image" => "https://picsum.photos/id/1026/1500/1000",
"size" => "normal",
"overlay" => "neutral",
"stretch" => true,
"title" => "Donec ullamcorper nulla non metus auctor fringilla.",
"byline" => "This is a byline",
"paragraph" => "Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla."
])
@endhero
Responsive image contract
Renders a hero fed by a fake ImageInterface with several candidate sizes, verifying only one eager, high-priority <img> is rendered instead of one hidden image per breakpoint.
Rendered from a fake responsive image contract
Inspect the element: only one should be present, with loading="eager", fetchpriority="high" and sizes="100vw".
The image is provided as an object implementing several candidate sizes instead of a plain URL, exercising the same srcset/container query data path used for real images.
<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" aria-label="Hero" data-uid="6aa53c2f212a8" data-component=
"hero">
<div class="c-hero__image" data-js-toggle-item="toggle-animation" data-js-toggle-class="u-animation--pause">
<!-- image.blade.php -->
<figure class="c-image c-image--container-query c-image--cover" data-uid="6aa53c2f21314" data-component="image">
<div class="c-image__image-wrapper">
<!-- Image assets -->
<img loading="lazy" class="c-image__image c-image--mock-image-6aa53c2f212f2-425" src="https://picsum.photos/seed/styleguide-hero-responsive/425/177" alt=
"A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53c2f212f2-768" src=
"https://picsum.photos/seed/styleguide-hero-responsive/768/320" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy"
class="c-image__image c-image--mock-image-6aa53c2f212f2-1024" src="https://picsum.photos/seed/styleguide-hero-responsive/1024/427" alt=
"A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53c2f212f2-1440" src=
"https://picsum.photos/seed/styleguide-hero-responsive/1440/600" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy"
class="c-image__image c-image--mock-image-6aa53c2f212f2-1920" src="https://picsum.photos/seed/styleguide-hero-responsive/1920/800" alt=
"A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" />
</div>
</figure><!-- Image styles -->
</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="6aa53c2f213ec" data-component="typography">
Rendered from a fake responsive image contract
</h2><!-- typography.blade.php (hasSeenH1) original: span -->
<span class="c-typography c-hero__byline c-typography__variant--h2" data-uid="6aa53c2f2141b" data-component="typography">Inspect the element: only one <img /> should be present, with
loading="eager", fetchpriority="high" and sizes="100vw".</span> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-hero__body c-typography__variant--p" data-uid="6aa53c2f21444" data-component="typography">
The image is provided as an object implementing several candidate sizes instead of a plain URL, exercising the same srcset/container query data path used for real images.
</p>
</div>
</div>
</section>
@hero([
"image" => \MunicipioStyleGuide\Helper\MockImage::responsive('styleguide-hero-responsive'),
"size" => "large",
"overlay" => "neutral",
"title" => "Rendered from a fake responsive image contract",
"byline" => "Inspect the element: only one <img> should be present, with loading=\"eager\", fetchpriority=\"high\" and sizes=\"100vw\".",
"paragraph" => "The image is provided as an object implementing several candidate sizes instead of a plain URL, exercising the same srcset/container query data path used for real images."
])
@endhero
API
Parameter
Default
Description
image
false
Background image
imageFocus
[]
Where to focus in the background.
video
false
Display a video as a background. This option will replace image.
size
normal
Ratio (normal, large)
title
The title text
byline
The byline text
paragraph
The body text.
stretch
false
Always stretch the hero vertically. Makes the hero the width of the viewport. Requires a centered container.
animation
false
Name of the animation
ariaLabel
Hero
Label provided for accessibility tools such as screen readers
heroView
default
Select which view to display
customHeroData
false
An array containing the custom data for the selected view (heroView).
meta
false
The meta text
background
false
Image or a color
textColor
The color of the text.
textAlignment
left
Alignment texts. Supports "left", "center" and "right".
contentBackgroundColor
The background color for texts in the content area.
contentAlignmentVertical
bottom
Vertical placement of the content: top|center|bottom.
contentAlignmentHorizontal
left
-
contentApplyRoundedCorners
true
Apply rounded corners to content if contentBackgroundColor is set.
contentApplyShadows
true
Apply shadows to content if contentBackgroundColor is set.
buttonArgs
[]
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
Poster image for the video
overlay
Add an overlay over an image to make text more legible
content
false
Content slot to be displayed in the hero
CSS API
Variable
Default
Type
Values
Description
--c-hero--base
var(--base)
range
-
Main unit that drives radius and spacing scales.
--c-hero--border-radius
var(--border-radius)
range
-
Border Radius
--c-hero--color--primary
var(--color--primary)
color
-
Primary
--c-hero--corner-shape
var(--corner-shape)
select
square, round, squircle, circular, bevel, scoop
Corner Shape
--c-hero--font-size-100
var(--font-size-100)
range
-
Base font size.
--c-hero--font-size-300
var(--font-size-300)
range
-
Two steps above base in the type scale. Equivalent to h5.
--c-hero--font-size-500
var(--font-size-500)
range
-
Four steps above base in the type scale. Equivalent to h3.
--c-hero--space
var(--space)
range
-
Base spacing unit. Used for padding and margin inside components.
--c-hero--color--alpha
var(--color--alpha)
rgba
-
Used for overlays. Includes opacity — set both color and alpha together.
--c-hero--shadow-color
var(--shadow-color)
rgba
-
Shadow Color
--c-hero--shadow-amount
var(--shadow-amount)
range
-
Multiplier for elevation shadows. 0 = none, 1 = default.
