@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.
Heading
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
Heading
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
Heading
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-uid="6a44fd2428076" data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-uid="6a44fd24280ed" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/id/308/1536/1024" alt="" />
</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-uid="6a44fd2428332" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="6a44fd24282ec" 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-uid="6a44fd24282a4" 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-uid="6a44fd2428379" 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-uid="6a44fd242743f" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container" data-uid="6a44fd242760e" data-component="card__image">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-uid="6a44fd2427507" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/400/300?a" alt="ALT" />
</div>
</figure>
</div>
<div class="c-card__body" data-uid="6a44fd2427886" 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-uid="6a44fd242777e" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a44fd2427731" 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-uid="6a44fd24276dd" 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-uid="6a44fd24277fd" 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-uid="6a44fd2427901" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container" data-uid="6a44fd2427a62" data-component="card__image">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-uid="6a44fd242799d" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/400/300?b" alt="ALT" />
</div>
</figure>
</div>
<div class="c-card__body" data-uid="6a44fd2427c54" 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-uid="6a44fd2427b9a" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a44fd2427b50" 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-uid="6a44fd2427b02" 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-uid="6a44fd2427c0a" 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-uid="6a44fd2427cc4" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container" data-uid="6a44fd2427e16" data-component="card__image">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-uid="6a44fd2427d61" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/400/300?c" alt="ALT" />
</div>
</figure>
</div>
<div class="c-card__body" data-uid="6a44fd242800e" 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-uid="6a44fd2427f53" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a44fd2427f09" 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-uid="6a44fd2427ebe" 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-uid="6a44fd2427fc5" 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.
Hey! Have you seen this?
You can add a card inside this split section, or any other component. Awesome!
@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.
@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([
'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-uid="6a44fd2457b56"
data-component="segment">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-uid="6a44fd2457bc8" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/id/1040/1080/720" alt="" />
</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-uid="6a44fd2457dff" data-component="group">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="6a44fd2457db9" 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-uid="6a44fd2457d70" 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-uid="6a44fd2457e45" 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-uid="6a44fd24578ba" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body" data-uid="6a44fd2457af1" 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-uid="6a44fd2457a26" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a44fd24579dc" 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-uid="6a44fd245798f" 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-uid="6a44fd2457aa2" 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
Description
layout
full-width
Which layout to use
title
false
The title of the segment
content
false
The content of the segment
textSize
default
The sizing of the font
image
false
Add a URL for an image
background
false
The background color, hex value or a color name (i.e. primary, secondary, etc)
backgroundOverlay
false
Which overlay to use
textColor
dark
Color of the text
height
content
Height behavior of the sections height
paddingTop
true
If it should have padding in the top
paddingBottom
true
If it should have padding in the bottom
textAlignment
top
How to align the text vertically
reverseColumns
false
If image and text should change order
overlay
false
Add an overlay over an image to make text more legible
stretch
false
Always stretch the section vertically. Makes the section the width of the viewport. Requires a centered container.
buttons
false
Array of buttons according to the @button specification. Do not use more than two buttons, one primary and on secondary.
date
false
The date
meta
false
The meta text
tags
false
Array of tags according to the tags component
icon
false
An array with the same specification as the icon component
iconBackgroundColor
null
The background color of the icon
link
false
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
true
Sets image specific styling based on the image being a placholder image.
lang
[]
An array with labels used in the component.
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.
