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

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--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="6605b6e5d3dd1">
        <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="6605b6e5d400e">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="6605b6e5d3fc8">
    <!-- typography.blade.php (promoted) (hasSeenH1)  original: h2 -->
<h1 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h1" data-uid="6605b6e5d3f65">
    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="6605b6e5d403f">
    <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',
])
@endsegment

Full Width Section - Width Cards

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 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="6605b6e5d45f7">
        <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="6605b6e5d4713">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="6605b6e5d46e4">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h1" data-uid="6605b6e5d46b9">
    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="6605b6e5d4744">
    <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="6605b6e5d40e9">
    <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="6605b6e5d4219">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6605b6e5d41de">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6605b6e5d41a9">
    Heading
</h2>
</div>
</div>    <!-- typography.blade.php  (hasSeenH1)  original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6605b6e5d426a">
    SubHeading
</h3>        <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6605b6e5d42b8">
    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="6605b6e5d42f8">
    <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="6605b6e5d43c0">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6605b6e5d4395">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6605b6e5d4368">
    Heading
</h2>
</div>
</div>    <!-- typography.blade.php  (hasSeenH1)  original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6605b6e5d43fd">
    SubHeading
</h3>        <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6605b6e5d4438">
    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="6605b6e5d4472">
    <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="6605b6e5d4530">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6605b6e5d4506">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6605b6e5d44da">
    Heading
</h2>
</div>
</div>    <!-- typography.blade.php  (hasSeenH1)  original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6605b6e5d456a">
    SubHeading
</h3>        <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6605b6e5d45a4">
    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>

@endsegment

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.

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="6605b6e5d4901">
        <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">
        <!-- 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="6605b6e5d4a26">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="6605b6e5d49fc">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="6605b6e5d49c7">
    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="6605b6e5d4a50">
    <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="6605b6e5d47bc">
    <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="6605b6e5d487d">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6605b6e5d4850">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6605b6e5d4822">
    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="6605b6e5d48bc">
    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

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="6605b6e5d4acd">
        <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="6605b6e5d4bdd">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="6605b6e5d4bb3">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="6605b6e5d4b87">
    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="6605b6e5d4c08">
    <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
])

@endsegment

Stacked 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="6605b6e5d4c80">
        <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="6605b6e5d4d8e">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="6605b6e5d4d64">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="6605b6e5d4d37">
    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="6605b6e5d4dcc">
    <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="6605b6e5d4e1f">
        <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="6605b6e5d4f37">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="6605b6e5d4f0c">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="6605b6e5d4ede">
    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="6605b6e5d4f64">
    <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="6605b6e5d4fa5">
        <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="6605b6e5d50bf">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="6605b6e5d5094">
    <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h2" data-uid="6605b6e5d5067">
    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="6605b6e5d50ec">
    <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']
])
@endsegment

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.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Segment/segment.json