Segments (sections)
The sections componet are specifically build to contain other components. The component creates a full-page container with a layout. It will work as long as the current container is centered. The component automatically bleeds beyond the container.
Full Width Section
Main content on the left
<!-- segment.blade.php -->
<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__bg--primary" data-uid="673ed5ec789bf">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/id/342/2896/1944'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec78b99">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec78b66">
<!-- typography.blade.php (promoted) (hasSeenH1) original: h2 -->
<h1 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h1" data-uid="673ed5ec78b12">
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-uid="673ed5ec78bc7">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
</div>
<div class="c-segment__inner-blocks o-container u-margin__x--auto u-hide-empty"><InnerBlocks /></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',
])
@endsegmentFull Width Section - Width Cards
<!-- segment.blade.php -->
<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__bg--primary" data-uid="673ed5ec79130">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/id/308/1536/1024'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec79234">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec7920b">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h1" data-uid="673ed5ec791e1">
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-uid="673ed5ec7925c">
<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--default c-card--has-image c-card--ratio-4-3" data-uid="673ed5ec78c56">
<div class="c-card__image c-card__image--secondary">
<div class="c-card__image-background " style="background-image:url('https://picsum.photos/400/300?a');"></div>
</div><div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed5ec78d62">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed5ec78d24">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed5ec78cf4">
Heading
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed5ec78dbc">
SubHeading
</h3> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed5ec78e20">
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 class="o-grid-4@lg o-grid-4@xl">
<!-- card.blade.php -->
<div class="c-card c-card--default c-card--has-image c-card--ratio-4-3" data-uid="673ed5ec78e5b">
<div class="c-card__image c-card__image--secondary">
<div class="c-card__image-background " style="background-image:url('https://picsum.photos/400/300?b');"></div>
</div><div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed5ec78f18">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed5ec78eef">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed5ec78ec3">
Heading
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed5ec78f51">
SubHeading
</h3> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed5ec78f89">
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 class="o-grid-4@lg o-grid-4@xl">
<!-- card.blade.php -->
<div class="c-card c-card--default c-card--has-image c-card--ratio-4-3" data-uid="673ed5ec78fc0">
<div class="c-card__image c-card__image--secondary">
<div class="c-card__image-background " style="background-image:url('https://picsum.photos/400/300?c');"></div>
</div><div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed5ec79075">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed5ec7904e">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed5ec79024">
Heading
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed5ec790ad">
SubHeading
</h3> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed5ec790ed">
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 class="c-segment__inner-blocks o-container u-margin__x--auto u-hide-empty"><InnerBlocks /></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',
'subHeading' => 'SubHeading',
'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',
'subHeading' => 'SubHeading',
'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',
'subHeading' => 'SubHeading',
'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>
@endsegmentSplit Section
Main content on the left
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Hey! Have you seen this?
You can add a card inside this split section, or any other component. Awesome!
<!-- segment.blade.php -->
<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__bg--primary" data-uid="673ed5ec793f6">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?e'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec79508">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec794e0">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="673ed5ec794ae">
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-uid="673ed5ec79530">
<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--default c-card--image-first c-card--ratio-4-3" data-uid="673ed5ec792ca">
<div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed5ec7937c">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed5ec79353">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed5ec79328">
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-uid="673ed5ec793b7">
You can add a card inside this split section, or any other component. Awesome!
</p> </div>
</div>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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
@endsegmentReversed Split Section
Main content on the left
Fusce Amet Parturient Etiam
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<!-- segment.blade.php -->
<section class="c-segment c-segment--split c-segment--text-dark c-segment--height-full-screen c-segment--text-default c-segment--alignment-bottom c-segment--reverse" data-uid="673ed5ec795a1">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?d'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec796a0">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec79678">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="673ed5ec79650">
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-uid="673ed5ec796c8">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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',
'height' => 'full-screen',
'textColor' => 'dark',
'textAlignment' => 'bottom',
'reverseColumns' => true
])
@endsegmentFeatured Section
Main content on 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.
<!-- 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-uid="673ed5ec79734">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?e'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec79847">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec79823">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="673ed5ec797ff">
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-uid="673ed5ec7987e">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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-uid="673ed5ec798c6">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?e'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec799c2">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec7999f">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="673ed5ec7997c">
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-uid="673ed5ec799e5">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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-uid="673ed5ec79a29">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?e'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec79b1f">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec79af8">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="673ed5ec79ad0">
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-uid="673ed5ec79b46">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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'
]
])
@endsegmentStacked Split Section
Stacking multiple split sections.
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.
<!-- 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__bg--secondary" data-uid="673ed5ec79bb2">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?a'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec79cb9">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec79c90">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="673ed5ec79c5f">
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-uid="673ed5ec79ce1">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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__bg--secondary" data-uid="673ed5ec79d1c">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?b'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec79e2d">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec79e04">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="673ed5ec79dda">
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-uid="673ed5ec79e58">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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__bg--secondary" data-uid="673ed5ec79e95">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?c'); background-position: 50% 50%;"></div>
<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-uid="673ed5ec79f9b">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec79f74">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="673ed5ec79f4c">
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-uid="673ed5ec79fc2">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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']
])
@endsegmentCard Section
A flexible card that transforms to a section.
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
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.
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-uid="673ed5ec7a02f">
<a class="c-link c-segment__image" id="" aria-label="Visit: https://helsingborg.se" href="https://helsingborg.se" target="_top" data-uid="673ed5ec7a06b">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/id/342/2896/1944'); background-position: 50% 50%;"></div>
</a>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="673ed5ec7a23d">
<!-- 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-uid="673ed5ec7a1db">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec7a121">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="673ed5ec7a0f8">
<a class="c-link" id="" href="https://helsingborg.se" target="_top" data-uid="673ed5ec7a0ce">
Fusce Amet Parturient Etiam
</a>
</h2>
</div>
</div>
<!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="673ed5ec7a20a">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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-uid="673ed5ec7a282">
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="673ed5ec7a3a4">
<!-- 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-uid="673ed5ec7a34d">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec7a326">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="673ed5ec7a2fc">
<a class="c-link" id="" href="https://helsingborg.se" target="_top" data-uid="673ed5ec7a2d1">
Fusce Amet Parturient Etiam (no image)
</a>
</h2>
</div>
</div>
<!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="673ed5ec7a375">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
</div>
</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-uid="673ed5ec7a3e0">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/id/342/2896/1944'); background-position: 50% 50%;"></div>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="673ed5ec7a580">
<!-- 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-uid="673ed5ec7a518">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec7a4e4">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="673ed5ec7a4b6">
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-uid="673ed5ec7a53f">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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-uid="673ed5ec7a5c0">
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="673ed5ec7a6e7">
<!-- 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-uid="673ed5ec7a68e">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec7a664">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="673ed5ec7a63a">
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-uid="673ed5ec7a6b7">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></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-uid="673ed5ec7a727">
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="673ed5ec7a866">
<!-- 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-uid="673ed5ec7a7f8">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="673ed5ec7a7cc">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="673ed5ec7a7a2">
<a class="c-link" id="" href="https://helsingborg.se" target="_top" data-uid="673ed5ec7a776">
Linked: Fusce Amet Parturient Etiam (no image, placeholder disabled)
</a>
</h2>
</div>
</div>
<!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="673ed5ec7a822">
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
</div>
</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://helsingborg.se'
])
@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://helsingborg.se',
'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://helsingborg.se',
'hasPlaceholder' => false
])
@endsegment
</div>
</div>Blade component parameters
| Key | Default value | Type | Available values | Description |
| layout | full-width | string | - | Which layout to use |
| title | false | boolean | - | The title of the segment |
| content | false | boolean | - | The content of the segment |
| textSize | default | string | - | The sizing of the font |
| image | false | boolean | - | Add a URL for an image |
| imageFocus | {"top":50,"left":50} | array | - | Where the focus point should be of an image when container dosen't match image ratio. |
| background | false | boolean | - | The background color, can be an URL to an image, hex value or a color name (i.e. primary, secondary, etc) |
| backgroundOverlay | false | boolean | - | Which overlay to use |
| textColor | dark | string | - | Color of the text |
| height | content | string | - | Height behavior of the sections height |
| paddingTop | true | boolean | - | If it should have padding in the top |
| paddingBottom | true | boolean | - | If it should have padding in the bottom |
| textAlignment | top | string | - | How to align the text vertically |
| reverseColumns | false | boolean | - | If image and text should change order |
| overlay | false | boolean | - | Add an overlay over an image to make text more legible |
| stretch | false | boolean | - | Always stretch the section vertically. Makes the section the width of the viewport. Requires a centered container. |
| buttons | false | boolean | - | Array of buttons according to the @button specification. Do not use more than two buttons, one primary and on secondary. |
| date | false | boolean | - | The date |
| meta | false | boolean | - | The meta text |
| tags | false | boolean | - | Array of tags according to the tags component |
| icon | false | boolean | - | An array with the same specification as the icon component |
| link | false | boolean | - | Link will be applied to the title and the image (if any). If there is one (1) button defined and no link is defined, the button will be used as the link. |
| hasPlaceholder | false | boolean | - | Sets image specific styling based on the image being a placholder image. |
| lang | {"visit":"Visit"} | array | - | An array with labels used in the component. |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |