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

Fusce Amet Parturient Etiam

Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

<!-- 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(&#039;https://i.picsum.photos/id/342/2896/1944.jpg?hmac=_2cYDHi2iG1XY53gvXOrhrEWIP5R5OJlP7ySYYCA0QA&#039;); 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.

Fusce Amet Parturient Etiam

Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Heading

SubHeading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Heading

SubHeading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Heading

SubHeading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. 

<!-- 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(&#039;https://i.picsum.photos/id/308/1536/1024.jpg?hmac=sENdBVMjJ5k40eSlDyPh8CZKbXjOm1S73hukmgfyMKQ&#039;); 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(&#039;https://picsum.photos/1080/720?e&#039;); 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(&#039;https://picsum.photos/1080/720?d&#039;); 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(&#039;https://picsum.photos/1080/720?a&#039;); 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(&#039;https://picsum.photos/1080/720?b&#039;); 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(&#039;https://picsum.photos/1080/720?c&#039;); 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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Segment/segment.json