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" width="2896" height="1944" />
</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" width="1536" height="1024" />
</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" width="400" height="300" />
</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" width="400" height="300" />
</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" width="400" height="300" />
</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" width="1080" height="720" />
</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" width="1080" height="720" />
</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" width="1080" height="720" />
</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" width="1080" height="720" />
</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" width="1080" height="720" />
</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" width="1080" height="720" />
</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" width="1080" height="720" />
</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" width="1080" height="720" />
</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" width="2896" height="1944" />
</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" width="2896" height="1944" />
</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" width="2896" height="1944" />
</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" width="2896" height="1944" />
</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" width="2896" height="1944" />
</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 -->
<span class="c-icon c-icon--broken-image c-icon--material c-icon--material-broken_image c-icon--svg-material c-icon--size-xxl" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M200 840Q167 840 143.5 816.5Q120 793 120 760V200Q120 167 143.5 143.5Q167 120 200 120H760Q793 120 816.5 143.5Q840 167 840 200V760Q840 793 816.5 816.5Q793 840 760 840ZM240 503 400 343 560 503 720 343 760 383V200Q760 200 760.0 200.0Q760 200 760 200H200Q200 200 200.0 200.0Q200 200 200 200V463ZM200 760H760Q760 760 760.0 760.0Q760 760 760 760V496L720 456L560 616L400 456L240 616L200 576V760Q200 760 200.0 760.0Q200 760 200 760ZM200 760Q200 760 200.0 760.0Q200 760 200 760V496V576V463V383V200Q200 200 200.0 200.0Q200 200 200 200Q200 200 200.0 200.0Q200 200 200 200V463V576V760Q200 760 200.0 760.0Q200 760 200 760Z">
</path></svg></span>
</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" width="1920" height="1080" />
</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" width="1080" height="720" />
</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="6ac94dc46fe26" 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" width="1080" height="720" />
</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 -->
<span class="c-icon c-segment__icon c-icon--place c-icon--material c-icon--material-place c-icon--svg-material c-icon--size-lg" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M480.0 480.0Q513 480 536.5 456.5Q560 433 560.0 400.0Q560 367 536.5 343.5Q513 320 480.0 320.0Q447 320 423.5 343.5Q400 367 400.0 400.0Q400 433 423.5 456.5Q447 480 480.0 480.0ZM480 774Q602 662 661.0 570.5Q720 479 720 408Q720 299 650.5 229.5Q581 160 480.0 160.0Q379 160 309.5 229.5Q240 299 240 408Q240 479 299.0 570.5Q358 662 480 774ZM480 880Q319 743 239.5 625.5Q160 508 160 408Q160 258 256.5 169.0Q353 80 480 80Q607 80 703.5 169.0Q800 258 800 408Q800 508 720.5 625.5Q641 743 480 880ZM480 400Q480 400 480.0 400.0Q480 400 480 400Q480 400 480.0 400.0Q480 400 480.0 400.0Q480 400 480.0 400.0Q480 400 480 400Q480 400 480.0 400.0Q480 400 480 400Z">
</path></svg></span>
</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" width="1080" height="720" />
</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" width="1920" height="1080" />
</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" width="1080" height="720" />
</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" width="1080" height="720" />
</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" width="1080" height="720" />
</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.
