Blocks

Blocks are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images,
should be placed on them in a way that clearly indicates hierarchy.

Block ratio 12:16

Ultricies

Nibh Dolor Bibendum Vehicula Amet

5 Jun
Malesuada Parturient Dolor

Nulla vitae elit libero, a pharetra augue

Porta Ultricies

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus

Nibh

Maecenas faucibus mollis interdum

Ornare Malesuada

Curabitur blandit tempus porttitor 

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<a class="c-block c-block--ratio-12-16"
     style="background-image:url('https://picsum.photos/id/15/680/1000');" href="#" data-uid="647e4f508a20a">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508a3df">
    Ultricies
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508a4fd">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508a46c">
    Nibh Dolor Bibendum Vehicula Amet
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16"
     style="background-image:url('https://picsum.photos/id/16/680/1000');" data-uid="647e4f508a5cd">

    
            <!-- datebadge.blade.php -->
<div class="c-datebadge u-margin--3 u-position--absolute u-absolute--top-left c-datebadge--md" data-uid="647e4f508a7ea">
    <div class="c-datebadge__daymonth">
        <!-- typography.blade.php  -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="647e4f508a905">
    5
</span>        <!-- typography.blade.php  -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="647e4f508a946">
    Jun
</span>    </div>
    </div>    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508a97f">
    Malesuada Parturient Dolor
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508a9f8">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508a9b3">
    Nulla vitae elit libero, a pharetra augue
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16"
     style="background-image:url('https://picsum.photos/id/17/680/1000');" data-uid="647e4f508aa6a">

    
    
            <div class="c-block__body">

                            <time class="2023-06-05 23:10 c-date c-block__date " data-uid="647e4f508ac9c">2023-06-05 23:10</time>
            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508ad06">
    Porta Ultricies
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508adb0">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508ad40">
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16"
     style="background-image:url('https://picsum.photos/id/18/680/1000');" data-uid="647e4f508ae36">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508aeca">
    Nibh
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508af87">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508af0f">
    Maecenas faucibus mollis interdum
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16"
     style="background-image:url('https://picsum.photos/id/19/680/1000');" data-uid="647e4f508afef">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508b03d">
    Ornare Malesuada
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508b0db">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508b09f">
    Curabitur blandit tempus porttitor
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Nibh Dolor Bibendum Vehicula Amet',
            'ratio' => '12:16',
            'meta' => 'Ultricies',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/15/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Nulla vitae elit libero, a pharetra augue',
            'ratio' => '12:16',
            'meta' => 'Malesuada Parturient Dolor',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/16/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'date' => date("Y-m-d H:i"),
            'dateBadge' => true
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
            'ratio' => '12:16',
            'meta' => 'Porta Ultricies',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/17/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'date' => date("Y-m-d H:i")
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Maecenas faucibus mollis interdum',
            'ratio' => '12:16',
            'meta' => 'Nibh',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/18/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Curabitur blandit tempus porttitor',
            'ratio' => '12:16',
            'meta' => 'Ornare Malesuada',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/19/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
</div>

Block ratio 4:3

Etiam Tristique Magna Nullam

Justo Nibh Condimentum

Ultricies

Nulla vitae elit libero, a pharetra augue

Porta Risus Venenatis

Nullam quis risus eget urna mollis ornare vel eu leo

Adipiscing Fusce

Justo Elit Tortor

Euismod

Donec ullamcorper nulla non metus auctor fringilla 

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<a class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/10/680/510');" href="#" data-uid="647e4f508b2d9">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508b31a">
    Etiam Tristique Magna Nullam
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508b38b">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508b354">
    Justo Nibh Condimentum
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/11/680/510');" data-uid="647e4f508b3cf">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508b428">
    Ultricies
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508b4a0">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508b467">
    Nulla vitae elit libero, a pharetra augue
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/12/680/510');" data-uid="647e4f508b506">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508b543">
    Porta Risus Venenatis
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508b5af">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508b57a">
    Nullam quis risus eget urna mollis ornare vel eu leo
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/13/680/510');" data-uid="647e4f508b5ec">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508b621">
    Adipiscing Fusce
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508b6bd">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508b672">
    Justo Elit Tortor
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/14/680/510');" data-uid="647e4f508b723">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508b766">
    Euismod
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508b7de">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508b79e">
    Donec ullamcorper nulla non metus auctor fringilla
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Justo Nibh Condimentum',
            'meta' => 'Etiam Tristique Magna Nullam',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/10/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Nulla vitae elit libero, a pharetra augue',
            'meta' => 'Ultricies',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/11/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Nullam quis risus eget urna mollis ornare vel eu leo',
            'meta' => 'Porta Risus Venenatis',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/12/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Justo Elit Tortor',
            'meta' => 'Adipiscing Fusce',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/13/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Donec ullamcorper nulla non metus auctor fringilla',
            'meta' => 'Euismod',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/14/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
</div>

Block ratio 4:3, without spacing between blocks

Parturient Ultricies

Purus Tellus

Nibh Sit

Donec id elit non mi porta gravida at eget metus

Commodo Fringilla

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Ullamcorper Euismod Pharetra

Maecenas sed diam eget risus varius blandit sit amet non magna

Amet

Pharetra Etiam 

<div class="o-grid o-grid--no-gutter">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<a class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/88/680/510');" href="#" data-uid="647e4f508b95d">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508b9a3">
    Parturient Ultricies
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508ba0d">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508b9d9">
    Purus Tellus
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/87/680/510');" data-uid="647e4f508ba4d">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508ba81">
    Nibh Sit
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508bb2b">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508bac3">
    Donec id elit non mi porta gravida at eget metus
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/32/680/510');" data-uid="647e4f508bb93">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508bbd3">
    Commodo Fringilla
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508bc3f">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508bc0a">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/33/680/510');" data-uid="647e4f508bc7d">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508bcc7">
    Ullamcorper Euismod Pharetra
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508bd4e">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508bd17">
    Maecenas sed diam eget risus varius blandit sit amet non magna
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3"
     style="background-image:url('https://picsum.photos/id/34/680/510');" data-uid="647e4f508bda3">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508bdef">
    Amet
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508be59">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508be25">
    Pharetra Etiam
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>
<div class="o-grid o-grid--no-gutter">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Purus Tellus',
            'meta' => 'Parturient Ultricies',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/88/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Donec id elit non mi porta gravida at eget metus',
            'meta' => 'Nibh Sit',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/87/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
            'meta' => 'Commodo Fringilla',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/32/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Maecenas sed diam eget risus varius blandit sit amet non magna',
            'meta' => 'Ullamcorper Euismod Pharetra',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/33/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Pharetra Etiam',
            'meta' => 'Amet',
            'filled' => true,
            'image' => [
                'src' => 'https://picsum.photos/id/34/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
</div>

Block without a image

Ultricies

Nibh Dolor Bibendum Vehicula Amet

Malesuada Parturient Dolor

Nulla vitae elit libero, a pharetra augue

No label No label No label

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus

Nibh

Maecenas faucibus mollis interdum

Ornare Malesuada

Curabitur blandit tempus porttitor 

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<a class="c-block c-block--ratio-12-16"
    href="#" data-uid="647e4f508c002">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508c052">
    Ultricies
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508c0d9">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508c0a0">
    Nibh Dolor Bibendum Vehicula Amet
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16"
    data-uid="647e4f508c126">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508c18a">
    Malesuada Parturient Dolor
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508c213">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508c1c4">
    Nulla vitae elit libero, a pharetra augue
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16"
    data-uid="647e4f508c26a">

    
    
            <div class="c-block__body">

            
                                                <div class="c-tags c-block__meta" id="647e4f508c30c" data-uid="647e4f508c30c">
                                    <span class="c-tags__tag ">
                                            
                                        No label
                    
                </span>
                                                <span class="c-tags__tag ">
                                            
                                        No label
                    
                </span>
                                                <span class="c-tags__tag ">
                                            
                                        No label
                    
                </span>
                    
        
        </div>
                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508c3d0">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508c38d">
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16"
    data-uid="647e4f508c415">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508c44b">
    Nibh
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508c4ce">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508c480">
    Maecenas faucibus mollis interdum
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16"
    data-uid="647e4f508c524">

    
    
            <div class="c-block__body">

            
                                                <!-- typography.blade.php  -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="647e4f508c55b">
    Ornare Malesuada
</span>                                        
                        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e4f508c5e9">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="647e4f508c592">
    Curabitur blandit tempus porttitor
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Nibh Dolor Bibendum Vehicula Amet',
            'ratio' => '12:16',
            'meta' => 'Ultricies',
            'filled' => true,
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Nulla vitae elit libero, a pharetra augue',
            'ratio' => '12:16',
            'meta' => 'Malesuada Parturient Dolor',
            'filled' => true
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
            'ratio' => '12:16',
            'meta' => ['Porta Ultricies', 'Malesuada Parturient Dolor', 'Ultricies'],
            'filled' => true
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Maecenas faucibus mollis interdum',
            'ratio' => '12:16',
            'meta' => 'Nibh',
            'filled' => true
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        @block([
            'heading' => 'Curabitur blandit tempus porttitor',
            'ratio' => '12:16',
            'meta' => 'Ornare Malesuada',
            'filled' => false
        ])
        @endblock
    </div>
</div>

Blade component parameters

Key Default value Type Available values Description
heading string - The heading of the block
content string - Short text to describe target content.
meta string - String or array of strings containing the meta information
secondaryMeta string - String or array of strings containing the secondary meta information
image false boolean - Array of image attributes, src, alt, backgroudColor.
link string - Simple href link
ratio 4:3 string - Ratio of the block
date false boolean - Preformatted date
dateBadge false boolean - Display date as a badge.
icon false boolean - An array with the same specification as the icon component
postId false boolean - -
postType string - -
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/block.json