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
This layout gives you the ability to put the main content to the left
<!-- segment.blade.php -->
<section id="62bed8d16449e" 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="62bed8d164498">
<div class="c-segment__image " style="background-image: url('https://i.picsum.photos/id/342/2896/1944.jpg?hmac=_2cYDHi2iG1XY53gvXOrhrEWIP5R5OJlP7ySYYCA0QA'); background-position: 50% 30%;"></div>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php (promoted) -->
<h1 id="62bed8d16455e" class="c-typography c-segment__title c-typography__variant--h1" data-uid="62bed8d16455a">
Fusce Amet Parturient Etiam
</h1>
<!-- typography.blade.php -->
<p id="62bed8d1645b1" class="c-typography c-segment__text c-typography__variant--p" data-uid="62bed8d1645af">
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</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://i.picsum.photos/id/342/2896/1944.jpg?hmac=_2cYDHi2iG1XY53gvXOrhrEWIP5R5OJlP7ySYYCA0QA',
'background' => 'primary',
'textColor' => 'light',
'overlay' => 'dark',
'textAlignment' => 'center',
])
@endsegment
Full Width Section - Width Cards
Full width content with sub components in slot.
<!-- segment.blade.php -->
<section id="62bed8d164f76" 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="62bed8d164f74">
<div class="c-segment__image " style="background-image: url('https://i.picsum.photos/id/308/1536/1024.jpg?hmac=sENdBVMjJ5k40eSlDyPh8CZKbXjOm1S73hukmgfyMKQ'); background-position: 50% 30%;"></div>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="62bed8d164fae" class="c-typography c-segment__title c-typography__variant--h1" data-uid="62bed8d164fab">
Fusce Amet Parturient Etiam
</h2>
<!-- typography.blade.php -->
<p id="62bed8d164fdf" class="c-typography c-segment__text c-typography__variant--p" data-uid="62bed8d164fdd">
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</div>
<div class="c-segment__slot o-container">
<div class="o-grid">
<div class="o-grid-4@lg">
<!-- card.blade.php -->
<div href="" id="62bed8d1649b3" class="c-card c-card--default c-card--ratio-4-3" data-uid="62bed8d1649ae">
<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">
<!-- typography.blade.php -->
<h2 id="62bed8d164b7b" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62bed8d164b76">
Heading
</h2> <!-- typography.blade.php -->
<h4 id="62bed8d164c25" class="c-typography c-typography__variant--h4" data-uid="62bed8d164c20">
SubHeading
</h4> <!-- typography.blade.php -->
<p id="62bed8d164ca1" class="c-typography c-typography__variant--p" data-uid="62bed8d164c9e">
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">
<!-- card.blade.php -->
<div href="" id="62bed8d164ce6" class="c-card c-card--default c-card--ratio-4-3" data-uid="62bed8d164ce4">
<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">
<!-- typography.blade.php -->
<h2 id="62bed8d164d69" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62bed8d164d66">
Heading
</h2> <!-- typography.blade.php -->
<h4 id="62bed8d164db6" class="c-typography c-typography__variant--h4" data-uid="62bed8d164db4">
SubHeading
</h4> <!-- typography.blade.php -->
<p id="62bed8d164dfa" class="c-typography c-typography__variant--p" data-uid="62bed8d164df8">
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">
<!-- card.blade.php -->
<div href="" id="62bed8d164e37" class="c-card c-card--default c-card--ratio-4-3" data-uid="62bed8d164e35">
<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">
<!-- typography.blade.php -->
<h2 id="62bed8d164eae" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62bed8d164eac">
Heading
</h2> <!-- typography.blade.php -->
<h4 id="62bed8d164ef2" class="c-typography c-typography__variant--h4" data-uid="62bed8d164ef0">
SubHeading
</h4> <!-- typography.blade.php -->
<p id="62bed8d164f35" class="c-typography c-typography__variant--p" data-uid="62bed8d164f33">
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://i.picsum.photos/id/308/1536/1024.jpg?hmac=sENdBVMjJ5k40eSlDyPh8CZKbXjOm1S73hukmgfyMKQ',
'background' => 'primary',
'textColor' => 'light',
'overlay' => 'dark'
])
<div class="o-grid">
<div class="o-grid-4@lg">
@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">
@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">
@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>
@endsegment
Split Section
Main content on the left
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.
Hey! Have you seen this?
You can add a card inside this split section, or any other component. Awesome!
<!-- segment.blade.php -->
<section id="62bed8d16532c" 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="62bed8d16532a">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?e'); background-position: 100% 90%;"></div>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="62bed8d165363" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62bed8d165361">
Fusce Amet Parturient Etiam
</h2>
<!-- typography.blade.php -->
<p id="62bed8d165394" class="c-typography c-segment__text c-typography__variant--p" data-uid="62bed8d165392">
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<div class="c-segment__slot">
<!-- card.blade.php -->
<div href="" id="62bed8d16521e" class="c-card c-card--default c-card--ratio-4-3" data-uid="62bed8d16521b">
<div class="c-card__body">
<!-- typography.blade.php -->
<h2 id="62bed8d165291" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62bed8d16528e">
Hey! Have you seen this?
</h2> <!-- typography.blade.php -->
<p id="62bed8d1652eb" class="c-typography c-typography__variant--p" data-uid="62bed8d1652e8">
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',
'imageFocus' => ['top' => '90', 'left' => '100']
])
@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
Main content on the left
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.
<!-- segment.blade.php -->
<section id="62bed8d16559e" 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="62bed8d16559c">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?d'); background-position: 50% 30%;"></div>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="62bed8d1655da" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62bed8d1655d8">
Fusce Amet Parturient Etiam
</h2>
<!-- typography.blade.php -->
<p id="62bed8d16560e" class="c-typography c-segment__text c-typography__variant--p" data-uid="62bed8d16560b">
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<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
])
@endsegment
Stacked Split Section
Stacking multiple split sections.
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.
<!-- segment.blade.php -->
<section id="62bed8d1658ee" 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="62bed8d1658eb">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?a'); background-position: 50% 30%;"></div>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="62bed8d16592c" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62bed8d16592a">
Fusce Amet Parturient Etiam
</h2>
<!-- typography.blade.php -->
<p id="62bed8d16595e" class="c-typography c-segment__text c-typography__variant--p" data-uid="62bed8d16595c">
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
</div>
</div>
</section><!-- segment.blade.php -->
<section id="62bed8d1659aa" 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="62bed8d1659a8">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?b'); background-position: 50% 30%;"></div>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="62bed8d1659de" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62bed8d1659dc">
Fusce Amet Parturient Etiam
</h2>
<!-- typography.blade.php -->
<p id="62bed8d165a0c" class="c-typography c-segment__text c-typography__variant--p" data-uid="62bed8d165a0a">
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
</div>
</div>
</section><!-- segment.blade.php -->
<section id="62bed8d165a42" 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="62bed8d165a40">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/1080/720?c'); background-position: 50% 30%;"></div>
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="62bed8d165a76" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62bed8d165a74">
Fusce Amet Parturient Etiam
</h2>
<!-- typography.blade.php -->
<p id="62bed8d165aa4" class="c-typography c-segment__text c-typography__variant--p" data-uid="62bed8d165aa2">
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<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']
])
@endsegment
Blade component parameters
Key | Default value | Type | Available values | Description |
layout | full-width | string | - | Which layout to use |
title | string | - | The title of the segment | |
content | string | - | The content of the segment | |
textSize | default | string | - | The sizing of the font |
image | false | boolean | - | Add a URL for an image |
imageFocus | {"top":30,"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. |
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. |