Municipio Styleguide

Segment

The Segment component provides a reusable pattern for segment in the interface.

Full Width 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.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--primary u-color__bg--primary" data-uid="69f0d09d23d4f" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d23e09" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/342/2896/1944" 
    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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d2407f" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d24046" data-component="group">
    <!-- typography.blade.php (promoted) (hasSeenH1)  original: h2 -->
<h1 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h1" data-uid="69f0d09d23fd5" data-component="typography">
    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="69f0d09d240b6" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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/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.

<!-- 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--primary u-color__bg--primary" data-uid="69f0d09d24c1a" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d24c6b" 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="69f0d09d24dd5" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d24da5" 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="69f0d09d24d72" 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="69f0d09d24e08" 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="69f0d09d24595" data-component="card">
    <div class="c-card__paint-container">
        <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--cover" data-uid="69f0d09d24627" 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">
                <!-- 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="69f0d09d24769" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d09d24731" 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="69f0d09d246f2" 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="69f0d09d247bf" 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="69f0d09d24819" data-component="card">
    <div class="c-card__paint-container">
        <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--cover" data-uid="69f0d09d24879" 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">
                <!-- 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="69f0d09d24980" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d09d2494e" 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="69f0d09d24918" 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="69f0d09d249ca" 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="69f0d09d24a15" data-component="card">
    <div class="c-card__paint-container">
        <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--cover" data-uid="69f0d09d24a72" 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">
                <!-- 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="69f0d09d24b73" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d09d24b42" 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="69f0d09d24b0e" 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="69f0d09d24bbb" 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.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--primary u-color__bg--primary" data-uid="69f0d09d25362" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d253c4" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/1080/720?e" 
    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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d2556b" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d25537" 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="69f0d09d25500" 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="69f0d09d255a1" data-component="typography">
    <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--ratio-16-9" data-uid="69f0d09d251a0" data-component="card">
    <div class="c-card__paint-container">
        <div class="c-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="69f0d09d252b5" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d09d2527a" 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="69f0d09d25239" data-component="typography">
    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="69f0d09d25307" data-component="typography">
    You can add a card inside this split section, or any other component. Awesome!
</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'        => '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.blade.php -->
<section class="c-segment c-segment--split c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center c-segment--reverse" data-uid="69f0d09d259f8" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d25a58" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/1080/720?d" 
    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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d25bf4" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d25bbf" 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="69f0d09d25b88" 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="69f0d09d25c2b" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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',
    'textColor'     => 'dark',
    'textAlignment' => 'center',
    'reverseColumns' => true
])

@endsegment

Featured 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.

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 u-margin__top--4 c-segment--featured c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-uid="69f0d09d260e0" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d2613e" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/1080/720?e" 
    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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d262d7" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d262a5" 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="69f0d09d2626f" 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="69f0d09d2630a" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>

            </div>
</div>
</section>

    <!-- segment.blade.php -->
<section class="c-segment u-margin__top--4 c-segment--featured c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-uid="69f0d09d26393" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d263e5" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/1080/720?e" 
    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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d2654b" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d2651a" 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="69f0d09d264e7" 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="69f0d09d2657c" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>

            </div>
</div>
</section>

    <!-- segment.blade.php -->
<section class="c-segment u-margin__top--4 c-segment--featured c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-uid="69f0d09d265c7" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d26613" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/1080/720?e" 
    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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d2678b" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d26758" 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="69f0d09d2671c" 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="69f0d09d267c0" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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'        => 'featured',
    'image'         => 'https://picsum.photos/1080/720?e',
    'textColor'     => 'dark',
    'textAlignment' => 'center',
    'classList' => [
        'u-margin__top--4'
    ]
])
@endsegment

@segment([
    'title'         => 'Fusce Amet Parturient Etiam',
    'content'       => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
    'layout'        => 'featured',
    'image'         => 'https://picsum.photos/1080/720?e',
    'textColor'     => 'dark',
    'textAlignment' => 'center',
    'classList' => [
        'u-margin__top--4'
    ]
])
@endsegment

@segment([
    'title'         => 'Fusce Amet Parturient Etiam',
    'content'       => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
    'layout'        => 'featured',
    'image'         => 'https://picsum.photos/1080/720?e',
    'textColor'     => 'dark',
    'textAlignment' => 'center',
    'classList' => [
        'u-margin__top--4'
    ]
])
@endsegment

Stacked Split Section

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 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--secondary u-color__bg--secondary" data-uid="69f0d09d26c97" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d26cfa" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/1080/720?a" 
    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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d26e8a" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d26e54" 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="69f0d09d26e1e" 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="69f0d09d26ec1" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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--secondary u-color__bg--secondary" data-uid="69f0d09d26f23" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d26f78" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/1080/720?b" 
    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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d270f1" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d270bd" 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="69f0d09d27087" 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="69f0d09d27126" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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--secondary u-color__bg--secondary" data-uid="69f0d09d27175" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d271c6" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/1080/720?c" 
    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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d2733e" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d2730d" 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="69f0d09d272cf" 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="69f0d09d27373" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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

Card Section

This is a card that adapts to the width of the viewport.

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.

Fusce Amet Parturient Etiam

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

Fusce Amet Parturient Etiam (no image)

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 (no image, placeholder enabled)

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

Linked: Fusce Amet Parturient Etiam (no image, placeholder disabled)

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

<div class="o-grid">
    <div class="o-grid-12">
            <!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-observe-resizes="" data-uid="69f0d09d2792a" data-component="segment">
        <a class="c-link c-segment__image-container" aria-label="Visit: https://getmunicipio.com" href="https://getmunicipio.com" target="_top" data-uid="69f0d09d27a18" data-component="link">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d27992" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/342/2896/1944" 
    alt=""
    
></div>                        </figure>
    </a>
    <div class="c-segment__content">
        <!-- card.blade.php -->
<a class="c-card c-segment__content-card c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" data-uid="69f0d09d27bd1" data-component="card">
    <div class="c-card__paint-container">
                <!-- 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="69f0d09d27b56" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d27b22" 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--h3" data-uid="69f0d09d27aea" 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="69f0d09d27b8b" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
            </div>
</a>
</div>
</section>
    </div>
    <div class="o-grid-12">
            <!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse" data-observe-resizes="" data-uid="69f0d09d27c29" data-component="segment">
        <a class="c-link c-segment__image-container" aria-label="Visit: https://getmunicipio.com" href="https://getmunicipio.com" target="_top" data-uid="69f0d09d27cf2" data-component="link">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d27c7a" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/342/2896/1944" 
    alt=""
    
></div>                        </figure>
    </a>
    <div class="c-segment__content">
        <!-- card.blade.php -->
<a class="c-card c-segment__content-card c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" data-uid="69f0d09d27e62" data-component="card">
    <div class="c-card__paint-container">
                <!-- 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="69f0d09d27def" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d27dbe" 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--h3" data-uid="69f0d09d27d8a" 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="69f0d09d27e21" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
            </div>
</a>
</div>
</section>
    </div>
    <div class="o-grid-12">
            <!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-observe-resizes="" data-uid="69f0d09d27ebe" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d27f0e" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/342/2896/1944" 
    alt=""
    
></div>                        </figure>
    <div class="c-segment__content">
        <!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-uid="69f0d09d280e4" data-component="card">
    <div class="c-card__paint-container">
                <!-- 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="69f0d09d28075" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d28044" 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--h3" data-uid="69f0d09d28011" 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="69f0d09d280a7" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
            </div>
</div>
</div>
</section>
    </div>
    <div class="o-grid-12">
            <!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse" data-observe-resizes="" data-uid="69f0d09d28134" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d28182" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/342/2896/1944" 
    alt=""
    
></div>                        </figure>
    <div class="c-segment__content">
        <!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-uid="69f0d09d28377" data-component="card">
    <div class="c-card__paint-container">
                <!-- 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="69f0d09d28303" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d282ce" 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--h3" data-uid="69f0d09d28297" 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="69f0d09d2833a" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
            </div>
</div>
</div>
</section>
    </div>
    <div class="u-padding__y--4"></div>
    <div class="o-grid-12">
            <!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--no-image" data-observe-resizes="" data-uid="69f0d09d283d0" data-component="segment">
            <div class="c-segment__content">
        <!-- card.blade.php -->
<a class="c-card c-segment__content-card c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" data-uid="69f0d09d28551" data-component="card">
    <div class="c-card__paint-container">
                <!-- 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="69f0d09d284dc" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d284a9" 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--h3" data-uid="69f0d09d28472" data-component="typography">
    Fusce Amet Parturient Etiam (no image)
</h2>
</div>
</div>



        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="69f0d09d2850e" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
            </div>
</a>
</div>
</section>
    </div>
    <div class="u-padding__y--4"></div>
    <div class="o-grid-4@md">
            <!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-uid="69f0d09d285a9" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d285fb" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/342/2896/1944" 
    alt=""
    
></div>                        </figure>
    <div class="c-segment__content">
        <!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-uid="69f0d09d287ef" data-component="card">
    <div class="c-card__paint-container">
                <!-- 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="69f0d09d2877c" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d28748" 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--h3" data-uid="69f0d09d28716" 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="69f0d09d287b0" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
            </div>
</div>
</div>
</section>
    </div>
    <div class="o-grid-4@md">
            <!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-uid="69f0d09d28842" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image c-image--is-placeholder c-image--is-placeholder" data-uid="69f0d09d28895" data-component="image">
                    <div class="c-image__placeholder" aria-label="">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--broken-image c-icon--material c-icon--material-broken_image material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-xxl" data-material-symbol="broken_image" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d09d28a61" data-component="icon">
                    </span>
          </div>
            </figure>
    <div class="c-segment__content">
        <!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-uid="69f0d09d28c4d" data-component="card">
    <div class="c-card__paint-container">
                <!-- 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="69f0d09d28bd4" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d28ba1" 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--h3" data-uid="69f0d09d28b67" data-component="typography">
    Fusce Amet Parturient Etiam (no image, placeholder enabled)
</h2>
</div>
</div>



        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="69f0d09d28c0b" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
            </div>
</div>
</div>
</section>
    </div>
    <div class="o-grid-4@md">
            <!-- segment.blade.php -->
<section class="c-segment c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center c-segment--no-image" data-uid="69f0d09d28ca8" data-component="segment">
            <div class="c-segment__content">
        <!-- card.blade.php -->
<a class="c-card c-segment__content-card c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" data-uid="69f0d09d28e25" data-component="card">
    <div class="c-card__paint-container">
                <!-- 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="69f0d09d28dab" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d28d7a" 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--h3" data-uid="69f0d09d28d45" data-component="typography">
    Linked: Fusce Amet Parturient Etiam (no image, placeholder disabled)
</h2>
</div>
</div>



        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="69f0d09d28de1" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
            </div>
</a>
</div>
</section>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12">
        @segment([
            'title'             => 'Fusce Amet Parturient Etiam',
            'content'           => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
            'layout'            => 'card',
            'image'             => 'https://picsum.photos/id/342/2896/1944',
            'containerAware'    => true,
            'link'              => 'https://getmunicipio.com',
        ])
        @endsegment
    </div>
    <div class="o-grid-12">
        @segment([
            'title'             => 'Fusce Amet Parturient Etiam',
            'content'           => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
            'layout'            => 'card',
            'image'             => 'https://picsum.photos/id/342/2896/1944',
            'containerAware'    => true,
            'link'              => 'https://getmunicipio.com',
            'reverseColumns'  => true
        ])
        @endsegment
    </div>
    <div class="o-grid-12">
        @segment([
            'title'             => 'Fusce Amet Parturient Etiam',
            'content'           => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
            'layout'            => 'card',
            'image'             => 'https://picsum.photos/id/342/2896/1944',
            'containerAware'    => true,
        ])
        @endsegment
    </div>
    <div class="o-grid-12">
        @segment([
            'title'             => 'Fusce Amet Parturient Etiam',
            'content'           => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
            'layout'            => 'card',
            'image'             => 'https://picsum.photos/id/342/2896/1944',
            'containerAware'    => true,
            'reverseColumns'  => true
        ])
        @endsegment
    </div>
    <div class="u-padding__y--4"></div>
    <div class="o-grid-12">
        @segment([
            'title'             => 'Fusce Amet Parturient Etiam (no image)',
            'content'           => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
            'layout'            => 'card',
            'containerAware'    => true,
            'link'              => 'https://getmunicipio.com',
            'hasPlaceholder'    => false
        ])
        @endsegment
    </div>
    <div class="u-padding__y--4"></div>
    <div class="o-grid-4@md">
        @segment([
            'title'             => 'Fusce Amet Parturient Etiam',
            'content'           => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
            'layout'            => 'card',
            'image'             => 'https://picsum.photos/id/342/2896/1944',
            'textColor'         => 'dark',
            'textAlignment'     => 'center'
        ])
        @endsegment
    </div>
    <div class="o-grid-4@md">
        @segment([
            'title'             => 'Fusce Amet Parturient Etiam (no image, placeholder enabled)',
            'content'           => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
            'layout'            => 'card',
            'textColor'         => 'dark',
            'textAlignment'     => 'center',
        ])
        @endsegment
    </div>
    <div class="o-grid-4@md">
        @segment([
            'title'             => 'Linked: Fusce Amet Parturient Etiam (no image, placeholder disabled)',
            'content'           => 'Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
            'layout'            => 'card',
            'textColor'         => 'dark',
            'textAlignment'     => 'center',
            'link'              => 'https://getmunicipio.com',
            'hasPlaceholder'    => false
        ])
        @endsegment
    </div>
</div>

Segment with Call-to-Action Buttons

Demonstrates rendering a full-width segment with two call-to-action buttons placed beneath the content.

Fusce Amet Parturient Etiam

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

Segment with Date, Meta and Tags

Shows a split segment using date, meta label, and tags for article or event-style layouts.

Fusce Amet Parturient Etiam

Category · Author

Sat 15 Jun 2024

# No label # No label

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-content c-segment--text-default c-segment--alignment-top" data-uid="69f0d09d297c0" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d2981d" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/96/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="69f0d09d299ca" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d29999" 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="69f0d09d29930" data-component="typography">
    Fusce Amet Parturient Etiam
</h2>            
                                <!-- typography.blade.php  (hasSeenH1)  original: span -->
<span class="c-typography c-segment__meta c-typography__variant--h4" data-uid="69f0d09d29966" data-component="typography">
    Category · Author
</span>
</div>
</div>
        <time class="c-date c-segment__date" data-date="2024-06-15T00:00:00" datetime="2024-06-15T00:00:00" data-uid="69f0d09d29a71" data-component="date">Sat 15 Jun 2024 </time>



        <div class="c-tags c-segment__tags u-margin__top--1" id="69f0d09d29ae1" data-uid="69f0d09d29ae1" data-component="tags">
                                    <span class="c-tags__tag ">
                                            #
                                        No label
                    
                </span>
                                                <span class="c-tags__tag ">
                                            #
                                        No label
                    
                </span>
                    
        
        </div>


        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="69f0d09d29b2c" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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/id/96/1080/720',
    'textColor' => 'dark',
    'date'      => '2024-06-15',
    'meta'      => 'Category · Author',
    'tags'      => [
        ['text' => 'News'],
        ['text' => 'Events'],
    ],
])
@endsegment

Segment with Icon

Demonstrates the icon and iconBackgroundColor parameters displayed in a featured layout segment.

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--featured c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-uid="69f0d09d29e79" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d29ed6" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/60/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="69f0d09d2a111" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d2a01f" 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="69f0d09d29fe9" data-component="typography">
    Fusce Amet Parturient Etiam
</h2>
</div>
                        <div class="c-element u-display--flex   u-rounded--full u-detail-shadow-3 aspect-ratio--1-1" style="background-color: transparent;" data-uid="69f0d09d2a0ce" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-segment__icon c-icon--place c-icon--material c-icon--material-place material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" data-material-symbol="place" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d09d2a061" data-component="icon">
                    </span>
    </div>
</div>



        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="69f0d09d2a149" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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'             => 'featured',
    'image'              => 'https://picsum.photos/id/60/1080/720',
    'textColor'          => 'dark',
    'icon'               => ['icon' => 'place', 'size' => 'lg']
])
@endsegment

Large Text Segment

Shows the textSize large variant which increases the content font size on medium and larger screens.

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-content c-segment--text-large c-segment--alignment-top" data-uid="69f0d09d2a45a" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d2a4bb" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/141/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="69f0d09d2a65e" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d2a62c" 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="69f0d09d2a5f2" 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="69f0d09d2a695" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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/id/141/1080/720',
    'textColor' => 'dark',
    'textSize'  => 'large',
])
@endsegment

Full Width with Light Overlay

Demonstrates the light overlay variant which applies a subtle brightness filter to the background image.

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-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--has-overlay" data-uid="69f0d09d2a9a0" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d2aa01" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/100/1920/1080" 
    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="69f0d09d2ab8d" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d2ab57" 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="69f0d09d2ab1f" 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="69f0d09d2abc3" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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/100/1920/1080',
    'textColor' => 'dark',
    'overlay'   => 'light',
])
@endsegment

Segment Without Padding

Shows paddingTop and paddingBottom set to false, removing vertical spacing from a split segment.

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 u-padding__top--0 u-padding__bottom--0 c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-center" data-uid="69f0d09d2af99" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image u-margin__top--0 u-margin__bottom--0" data-uid="69f0d09d2aff6" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/119/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-center c-group--gap-2 c-group--align-items-start" data-uid="69f0d09d2b18f" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d2b13b" 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="69f0d09d2b105" 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="69f0d09d2b1c3" data-component="typography">
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</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/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.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="69f0d09d2b489" data-component="segment">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d09d2b4e5" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/29/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="69f0d09d2b66a" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d09d2b637" 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="69f0d09d2b602" 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="69f0d09d2b69c" data-component="typography">
    <p>Overflow hidden is applied on container. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>

                     </div>
</div>
</section>
</div>

<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>

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		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-200	var(--font-size-200)	range	-	One step above base in the type scale. Equivalent to h6/subtitle.
--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.
--c-segment--color--alpha-contrast	var(--color--alpha-contrast)	color	-	Used for text and icons on alpha overlays.

Similar components

Megamenu Select Comment