Home
Components
Segment
Segment
The Segment component provides a reusable pattern for segment in the interface.
Full Width Section
This layout gives you the ability to put the main content to the left
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class=
"c-segment c-segment--full-width c-segment--text-light c-segment--height-content c-segment--text-default c-segment--alignment-center c-segment--has-overlay u-color--primary u-color__bg--primary"
data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/342/2896/1944" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (promoted) (hasSeenH1) original: h2 -->
<h1 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h1" data-component="typography">
Fusce Amet Parturient Etiam
</h1>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'full-width',
'image' => 'https://picsum.photos/id/342/2896/1944',
'background' => 'primary',
'textColor' => 'light',
'overlay' => 'dark',
'textAlignment' => 'center',
])
@endsegment
Full Width Section - Width Cards
Full width content with sub components in slot.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
<section class=
"c-segment c-segment--full-width c-segment--text-light c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--has-overlay u-color--primary u-color__bg--primary"
data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/308/1536/1024" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h1" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
<div class="c-segment__slot o-container">
<div class="o-grid">
<div class="o-grid-4@lg o-grid-4@xl">
<!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container" data-component="card__image">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/400/300?a" alt="ALT" loading="lazy" />
</div>
</figure>
</div>
<div class="c-card__body" data-component="card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
Heading
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>
</div>
</div>
</div>
</div>
<div class="o-grid-4@lg o-grid-4@xl">
<!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container" data-component="card__image">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/400/300?b" alt="ALT" loading="lazy" />
</div>
</figure>
</div>
<div class="c-card__body" data-component="card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
Heading
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>
</div>
</div>
</div>
</div>
<div class="o-grid-4@lg o-grid-4@xl">
<!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container" data-component="card__image">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/400/300?c" alt="ALT" loading="lazy" />
</div>
</figure>
</div>
<div class="c-card__body" data-component="card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
Heading
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'full-width',
'image' => 'https://picsum.photos/id/308/1536/1024',
'background' => 'primary',
'textColor' => 'light',
'overlay' => 'dark'
])
<div class="o-grid">
<div class="o-grid-4@lg o-grid-4@xl">
@card([
'heading' => 'Heading',
'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
'image' => [
'src' => 'https://picsum.photos/400/300?a',
'alt' => 'ALT',
'backgroundColor' => 'secondary'
]
])
@endcard
</div>
<div class="o-grid-4@lg o-grid-4@xl">
@card([
'heading' => 'Heading',
'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
'image' => [
'src' => 'https://picsum.photos/400/300?b',
'alt' => 'ALT',
'backgroundColor' => 'secondary'
]
])
@endcard
</div>
<div class="o-grid-4@lg o-grid-4@xl">
@card([
'heading' => 'Heading',
'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
'image' => [
'src' => 'https://picsum.photos/400/300?c',
'alt' => 'ALT',
'backgroundColor' => 'secondary'
]
])
@endcard
</div>
</div>
@endsegment
Split Section
This layout gives you the ability to put the main content to the left
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
You can add a card inside this split section, or any other component. Awesome!
<section class="c-segment c-segment--split c-segment--text-light c-segment--height-content c-segment--text-default c-segment--alignment-center u-color--primary u-color__bg--primary" data-component=
"segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/1080/720?e" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
<div class="c-segment__slot">
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body" data-component="card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
Hey! Have you seen this?
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
You can add a card inside this split section, or any other component. Awesome!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'split',
'image' => 'https://picsum.photos/1080/720?e',
'background' => 'primary',
'textColor' => 'light',
'textAlignment' => 'center'
])
@card([
'heading' => 'Hey! Have you seen this?',
'content' => 'You can add a card inside this split section, or any other component. Awesome!',
])
@endcard
@endsegment
Reversed Split Section
This layout gives you the ability to put the main content to the left
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class="c-segment c-segment--split c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center c-segment--reverse" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/1080/720?d" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'split',
'image' => 'https://picsum.photos/1080/720?d',
'textColor' => 'dark',
'textAlignment' => 'center',
'reverseColumns' => true
])
@endsegment
Featured Section
This layout gives you the ability to put the main content to the left
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class="c-segment u-margin__top--4 c-segment--featured c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/1080/720?e" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section><!-- segment.blade.php -->
<section class="c-segment u-margin__top--4 c-segment--featured c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/1080/720?e" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section><!-- segment.blade.php -->
<section class="c-segment u-margin__top--4 c-segment--featured c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/1080/720?e" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'featured',
'image' => 'https://picsum.photos/1080/720?e',
'textColor' => 'dark',
'textAlignment' => 'center',
'classList' => [
'u-margin__top--4'
]
])
@endsegment
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'featured',
'image' => 'https://picsum.photos/1080/720?e',
'textColor' => 'dark',
'textAlignment' => 'center',
'classList' => [
'u-margin__top--4'
]
])
@endsegment
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'featured',
'image' => 'https://picsum.photos/1080/720?e',
'textColor' => 'dark',
'textAlignment' => 'center',
'classList' => [
'u-margin__top--4'
]
])
@endsegment
Stacked Split Section
Demonstrates how a stacked array of sections look like.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class=
"c-segment c-segment--highlight c-segment--split c-segment--text-light c-segment--height-content c-segment--text-default c-segment--alignment-center u-color--secondary u-color__bg--secondary"
data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/1080/720?a" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section><!-- segment.blade.php -->
<section class=
"c-segment c-segment--highlight c-segment--split c-segment--text-light c-segment--height-content c-segment--text-default c-segment--alignment-center c-segment--reverse u-color--secondary u-color__bg--secondary"
data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/1080/720?b" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section><!-- segment.blade.php -->
<section class=
"c-segment c-segment--highlight c-segment--split c-segment--text-light c-segment--height-content c-segment--text-default c-segment--alignment-center u-color--secondary u-color__bg--secondary"
data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/1080/720?c" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'split',
'image' => 'https://picsum.photos/1080/720?a',
'background' => 'secondary',
'textColor' => 'light',
'textAlignment' => 'center',
'classList' => ['c-segment--highlight']
])
@endsegment
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'split',
'image' => 'https://picsum.photos/1080/720?b',
'background' => 'secondary',
'textColor' => 'light',
'textAlignment' => 'center',
'reverseColumns' => true,
'classList' => ['c-segment--highlight']
])
@endsegment
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'split',
'image' => 'https://picsum.photos/1080/720?c',
'background' => 'secondary',
'textColor' => 'light',
'textAlignment' => 'center',
'classList' => ['c-segment--highlight']
])
@endsegment
Card Section
This is a card that adapts to the width of the viewport.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Fusce Amet Parturient Etiam (no image, placeholder enabled)
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<div class="o-grid">
<div class="o-grid-12">
<!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-observe-resizes="" data-component="segment">
<a class="c-link c-segment__image-container" aria-label=": https://getmunicipio.com" href="https://getmunicipio.com" target="_top" data-component="link"><!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/342/2896/1944" alt="" loading="lazy" />
</div>
</figure></a>
<div class="c-segment__content">
<!-- card.blade.php -->
<a class="c-card c-segment__content-card c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" data-component="card">
<div class="c-card__paint-container">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div></a>
</div>
</section>
</div>
<div class="o-grid-12">
<!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse" data-observe-resizes=""
data-component="segment">
<a class="c-link c-segment__image-container" aria-label=": https://getmunicipio.com" href="https://getmunicipio.com" target="_top" data-component="link"><!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/342/2896/1944" alt="" loading="lazy" />
</div>
</figure></a>
<div class="c-segment__content">
<!-- card.blade.php -->
<a class="c-card c-segment__content-card c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" data-component="card">
<div class="c-card__paint-container">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div></a>
</div>
</section>
</div>
<div class="o-grid-12">
<!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-observe-resizes="" data-component="segment">
<div class="c-link c-segment__image-container" aria-label=":" data-component="link">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/342/2896/1944" alt="" loading="lazy" />
</div>
</figure>
</div>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="o-grid-12">
<!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse" data-observe-resizes=""
data-component="segment">
<div class="c-link c-segment__image-container" aria-label=":" data-component="link">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/342/2896/1944" alt="" loading="lazy" />
</div>
</figure>
</div>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="u-padding__y--4"></div>
<div class="o-grid-12">
<!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--no-image" data-observe-resizes=""
data-component="segment">
<div class="c-segment__content">
<!-- card.blade.php -->
<a class="c-card c-segment__content-card c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" data-component="card">
<div class="c-card__paint-container">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
Fusce Amet Parturient Etiam (no image)
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div></a>
</div>
</section>
</div>
<div class="u-padding__y--4"></div>
<div class="o-grid-4@md">
<!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-component="segment">
<div class="c-link c-segment__image-container" aria-label=":" data-component="link">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/342/2896/1944" alt="" loading="lazy" />
</div>
</figure>
</div>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="o-grid-4@md">
<!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-component="segment">
<div class="c-link c-segment__image-container" aria-label=":" data-component="link">
<!-- image.blade.php -->
<figure class="c-image c-segment__image c-image--is-placeholder c-image--is-placeholder" data-component="image">
<div class="c-image__placeholder" aria-label="">
<!-- icon.blade.php -->
</div>
</figure>
</div>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
Fusce Amet Parturient Etiam (no image, placeholder enabled)
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="o-grid-4@md">
<!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center c-segment--no-image" data-component="segment">
<div class="c-segment__content">
<!-- card.blade.php -->
<a class="c-card c-segment__content-card c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" data-component="card">
<div class="c-card__paint-container">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
Linked: Fusce Amet Parturient Etiam (no image, placeholder disabled)
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div></a>
</div>
</section>
</div>
</div>
<div class="o-grid">
<div class="o-grid-12">
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'card',
'image' => 'https://picsum.photos/id/342/2896/1944',
'containerAware' => true,
'link' => 'https://getmunicipio.com',
])
@endsegment
</div>
<div class="o-grid-12">
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'card',
'image' => 'https://picsum.photos/id/342/2896/1944',
'containerAware' => true,
'link' => 'https://getmunicipio.com',
'reverseColumns' => true
])
@endsegment
</div>
<div class="o-grid-12">
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'card',
'image' => 'https://picsum.photos/id/342/2896/1944',
'containerAware' => true,
])
@endsegment
</div>
<div class="o-grid-12">
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'card',
'image' => 'https://picsum.photos/id/342/2896/1944',
'containerAware' => true,
'reverseColumns' => true
])
@endsegment
</div>
<div class="u-padding__y--4"></div>
<div class="o-grid-12">
@segment([
'title' => 'Fusce Amet Parturient Etiam (no image)',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'card',
'containerAware' => true,
'link' => 'https://getmunicipio.com',
'hasPlaceholder' => false
])
@endsegment
</div>
<div class="u-padding__y--4"></div>
<div class="o-grid-4@md">
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'card',
'image' => 'https://picsum.photos/id/342/2896/1944',
'textColor' => 'dark',
'textAlignment' => 'center'
])
@endsegment
</div>
<div class="o-grid-4@md">
@segment([
'title' => 'Fusce Amet Parturient Etiam (no image, placeholder enabled)',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'card',
'textColor' => 'dark',
'textAlignment' => 'center',
])
@endsegment
</div>
<div class="o-grid-4@md">
@segment([
'title' => 'Linked: Fusce Amet Parturient Etiam (no image, placeholder disabled)',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'card',
'textColor' => 'dark',
'textAlignment' => 'center',
'link' => 'https://getmunicipio.com',
'hasPlaceholder' => false
])
@endsegment
</div>
</div>
Segment with Call-to-Action Buttons
Demonstrates rendering a full-width segment with two call-to-action buttons placed beneath the content.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class=
"c-segment c-segment--full-width c-segment--text-light c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--has-overlay u-color--primary u-color__bg--primary"
data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/28/1920/1080" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h1" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
<div class="c-segment__buttons">
<a class="c-button c-button__filled c-button__filled--default c-button--md" href="https://getmunicipio.com" target="_top" aria-label="Read more" data-component="button"><span class=
"c-button__label"><span class="c-button__label-text">Read more</span></span></a> <a class="c-button c-button__filled c-button__filled--default c-button--md" href="https://getmunicipio.com"
target="_top" aria-label="Learn more" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Learn more</span></span></a>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'full-width',
'image' => 'https://picsum.photos/id/28/1920/1080',
'background' => 'primary',
'textColor' => 'light',
'overlay' => 'dark',
'buttons' => [
[
'href' => 'https://getmunicipio.com',
'text' => 'Read more',
],
[
'href' => 'https://getmunicipio.com',
'text' => 'Learn more',
],
],
])
@endsegment
Segment with Date, Meta and Tags
Shows a split segment using date, meta label, and tags for article or event-style layouts.
Fusce Amet Parturient Etiam
Category · Author
Sat 15 Jun 2024
#
No label
#
No label
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class="c-segment c-segment--split c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/96/1080/720" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2><!-- typography.blade.php (hasSeenH1) original: span -->
<span class="c-typography c-segment__meta c-typography__variant--h4" data-component="typography">Category · Author</span>
</div>
</div><time class="c-date c-segment__date" data-date="2024-06-15T00:00:00" datetime="2024-06-15T00:00:00" data-component="date">Sat 15 Jun 2024</time>
<div class="c-tags c-segment__tags u-margin__top--1" id="6aaec5a4cde8f" data-component="tags">
<span class="c-tags__tag"># No label</span> <span class="c-tags__tag"># No label</span>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'split',
'image' => 'https://picsum.photos/id/96/1080/720',
'textColor' => 'dark',
'date' => '2024-06-15',
'meta' => 'Category · Author',
'tags' => [
['text' => 'News'],
['text' => 'Events'],
],
])
@endsegment
Segment with Icon
Demonstrates the icon and iconBackgroundColor parameters displayed in a featured layout segment.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class="c-segment c-segment--featured c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/60/1080/720" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
<div class="c-element u-display--flex u-rounded--full u-detail-shadow-3 aspect-ratio--1-1" style="background-color: transparent;" data-component="element">
<!-- icon.blade.php -->
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'featured',
'image' => 'https://picsum.photos/id/60/1080/720',
'textColor' => 'dark',
'icon' => ['icon' => 'place', 'size' => 'lg']
])
@endsegment
Large Text Segment
Shows the textSize large variant which increases the content font size on medium and larger screens.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class="c-segment c-segment--split c-segment--text-dark c-segment--height-content c-segment--text-large c-segment--alignment-top" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/141/1080/720" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'split',
'image' => 'https://picsum.photos/id/141/1080/720',
'textColor' => 'dark',
'textSize' => 'large',
])
@endsegment
Full Width with Light Overlay
Demonstrates the light overlay variant which applies a subtle brightness filter to the background image.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class="c-segment c-segment--full-width c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--has-overlay" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/100/1920/1080" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h1" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'full-width',
'image' => 'https://picsum.photos/id/100/1920/1080',
'textColor' => 'dark',
'overlay' => 'light',
])
@endsegment
Segment Without Padding
Shows paddingTop and paddingBottom set to false, removing vertical spacing from a split segment.
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<section class="c-segment c-segment--split u-padding__top--0 u-padding__bottom--0 c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-component=
"segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image u-margin__top--0 u-margin__bottom--0" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/119/1080/720" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-center c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'split',
'image' => 'https://picsum.photos/id/119/1080/720',
'textColor' => 'dark',
'paddingTop' => false,
'paddingBottom' => false,
'textAlignment' => 'center',
])
@endsegment
Stretched Segment
Demonstrates the stretch parameter which bleeds the segment to full viewport width, breaking out of its surrounding container.
Fusce Amet Parturient Etiam
Overflow hidden is applied on container. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<div style="overflow: hidden;">
<!-- segment.blade.php -->
<section class="c-segment c-segment--split c-segment--stretch c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/29/1080/720" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Fusce Amet Parturient Etiam
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Overflow hidden is applied on container. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
</div>
</section>
</div>
<div style="overflow: hidden;">
@segment([
'title' => 'Fusce Amet Parturient Etiam',
'content' => 'Overflow hidden is applied on container. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
'layout' => 'split',
'image' => 'https://picsum.photos/id/29/1080/720',
'stretch' => true,
])
@endsegment
</div>
Split Section With Tall Content
Demonstrates a split segment where the content column becomes taller than the image, causing the image to stretch to full height.
Split Section With Tall Content
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Additional content makes the text column taller
This card is included to demonstrate that the split image now stretches to match the content height when the content column grows larger than the image.
<div style="overflow: hidden;">
<!-- segment.blade.php -->
<section class="c-segment c-segment--split c-segment--stretch c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/1040/1080/720" alt="" loading="lazy" />
</div>
</figure>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h2" data-component="typography">
Split Section With Tall Content
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
<p>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id
elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
<div class="c-segment__slot">
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body" data-component="card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
Additional content makes the text column taller
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
This card is included to demonstrate that the split image now stretches to match the content height when the content column grows larger than the image.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div style="overflow: hidden;">
@segment([
'title' => 'Split Section With Tall Content',
'content' => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.',
'layout' => 'split',
'image' => 'https://picsum.photos/id/1040/1080/720',
'stretch' => true,
'textColor' => 'dark',
'textAlignment' => 'top'
])
@card([
'heading' => 'Additional content makes the text column taller',
'content' => 'This card is included to demonstrate that the split image now stretches to match the content height when the content column grows larger than the image.',
])
@endcard
@endsegment
</div>
API
Parameter
Default
Type
Description
layout
full-width
string
-
title
false
string|boolean
-
content
false
string|boolean
-
textSize
default
string
-
image
false
ComponentLibrary\Integrations\Image\ImageInterface|string|boolean
-
background
false
string|boolean
-
backgroundOverlay
false
string|boolean
-
textColor
dark
string
-
height
content
string
-
paddingTop
true
boolean
-
paddingBottom
true
boolean
-
textAlignment
top
string
-
reverseColumns
false
boolean
-
overlay
false
string|boolean
-
stretch
false
boolean
-
buttons
false
array|boolean
-
date
false
string|boolean
-
meta
false
string|boolean
-
tags
false
array|boolean
-
icon
false
array|boolean
-
iconBackgroundColor
null
?string
-
link
false
string|boolean
-
hasPlaceholder
true
boolean
-
lang
[]
array|boolean
-
containerAware
false
boolean
-
CSS API
Variable
Default
Type
Values
Description
--c-segment--space
var(--space)
range
-
Base spacing unit. Used for padding and margin inside components.
--c-segment--base
var(--base)
range
-
Main unit that drives radius and spacing scales.
--c-segment--border-radius
var(--border-radius)
range
-
Border Radius
--c-segment--color--primary
var(--color--primary)
color
-
Primary
--c-segment--color--secondary
var(--color--secondary)
color
-
Secondary
--c-segment--font-size-90
var(--font-size-90)
range
-
One step below base in the type scale.
--c-segment--font-size-100
var(--font-size-100)
range
-
Base font size.
--c-segment--font-size-200
var(--font-size-200)
range
-
One step above base in the type scale. Equivalent to h6/subtitle.
--c-segment--font-size-300
var(--font-size-300)
range
-
Two steps above base in the type scale. Equivalent to h5.
--c-segment--font-size-400
var(--font-size-400)
range
-
Three steps above base in the type scale. Equivalent to h4.
--c-segment--font-size-500
var(--font-size-500)
range
-
Four steps above base in the type scale. Equivalent to h3.
--c-segment--font-size-600
var(--font-size-600)
range
-
Five steps above base in the type scale. Equivalent to h2.
--c-segment--corner-shape
var(--corner-shape)
select
square, round, squircle, circular, bevel, scoop
Corner Shape
--c-segment--color--alpha
var(--color--alpha)
rgba
-
Used for overlays. Includes opacity — set both color and alpha together.
--c-segment--color--surface-contrast
var(--color--surface-contrast)
color
-
Used for text and icons on surface backgrounds with less contrast.
--c-segment--color--alpha-contrast
var(--color--alpha-contrast)
color
-
Used for text and icons on alpha overlays.
