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="61efb7d304dbd" 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--overlay-dark u-color__bg--primary" data-uid="61efb7d304db8">
            <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>
    
    
            
        <div class="c-segment__inner-blocks o-container u-margin__x--auto u-hide-empty"><InnerBlocks /></div>
        
</section>

@segment([
    '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

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.

Full width content with sub components in slot.

<!-- segment.blade.php -->
<section id="61efb7d305840" 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--overlay-dark u-color__bg--primary" data-uid="61efb7d30583d">
            <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>
    
            <div class="c-segment__slot o-container">
            <div class="o-grid">

        <div class="o-grid-4@lg">
            <!-- card.blade.php -->
<div href="" id="61efb7d3051a5" class="c-card c-card--default c-card--ratio-4-3" data-uid="61efb7d3051a1">
    <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="61efb7d305329" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efb7d305326">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efb7d3053af" class="c-typography c-typography__variant--h4" data-uid="61efb7d3053ac">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efb7d30542a" class="c-typography c-typography__variant--p" data-uid="61efb7d305427">
    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="61efb7d305485" class="c-card c-card--default c-card--ratio-4-3" data-uid="61efb7d305482">
    <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="61efb7d30553d" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efb7d30553a">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efb7d30559f" class="c-typography c-typography__variant--h4" data-uid="61efb7d30559c">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efb7d305600" class="c-typography c-typography__variant--p" data-uid="61efb7d3055fd">
    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="61efb7d305666" class="c-card c-card--default c-card--ratio-4-3" data-uid="61efb7d305664">
    <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="61efb7d305722" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efb7d30571f">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efb7d305784" class="c-typography c-typography__variant--h4" data-uid="61efb7d305782">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efb7d3057e6" class="c-typography c-typography__variant--p" data-uid="61efb7d3057e3">
    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([
    '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

<!-- segment.blade.php -->
<section id="61efb7d305ca8" 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="61efb7d305ca5">
            <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>
    
    
        
</section>

@segment([
    '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

<!-- segment.blade.php -->
<section id="61efb7d305fb4" 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="61efb7d305fb1">
            <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>
    
    
        
</section>

@segment([
    '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.

<!-- segment.blade.php -->
<section id="61efb7d3062a5" 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="61efb7d3062a3">
            <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>
    
    
        
</section><!-- segment.blade.php -->
<section id="61efb7d30630a" 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="61efb7d306307">
            <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>
    
    
        
</section><!-- segment.blade.php -->
<section id="61efb7d306366" 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="61efb7d306364">
            <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>
    
    
        
</section>

@segment([
    'layout'        => 'split',
    'image'         => 'https://picsum.photos/1080/720?a',
    'background'    => 'secondary',
    'textColor'     => 'light',
    'textAlignment' => 'center',
    'classList' => ['c-segment--highlight']
])
@endsegment
@segment([
    'layout'        => 'split',
    'image'         => 'https://picsum.photos/1080/720?b',
    'background'    => 'secondary',
    'textColor'     => 'light',
    'textAlignment' => 'center',
    'reverseColumns' => true,
    'classList' => ['c-segment--highlight']
])
@endsegment
@segment([
    '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