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


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Ultricies

Nibh Dolor Bibendum Vehicula Amet


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
1 Jul
Malesuada Parturient Dolor

Nulla vitae elit libero, a pharetra augue


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
2022-07-01 13:43
Porta Ultricies

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


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Nibh

Maecenas faucibus mollis interdum


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
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">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<a href="#" id="62beddfd265c8" class="c-block c-block--ratio-12-16" style="background-image:url('https://picsum.photos/680/1000?image=15');" data-uid="62beddfd265c2">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd26b55" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd26b4f">
    Ultricies
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd26bc6" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd26bc3">
    Nibh Dolor Bibendum Vehicula Amet
</h2>            
            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd26c6c" class="c-block c-block--ratio-12-16" style="background-image:url('https://picsum.photos/680/1000?image=16');" data-uid="62beddfd26c69">

            <!-- datebadge.blade.php -->
<div id="62beddfd26d81" class="c-datebadge u-position--absolute u-margin--3 u-fixed--top-left c-datebadge--md" data-uid="62beddfd26d7e">
    <div class="c-datebadge__daymonth">
        <!-- typography.blade.php  -->
<span id="62beddfd26de0" class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="62beddfd26dde">
    1
</span>        <!-- typography.blade.php  -->
<span id="62beddfd26e16" class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="62beddfd26e14">
    Jul
</span>    </div>
    </div>    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd26e49" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd26e46">
    Malesuada Parturient Dolor
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd26e8d" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd26e88">
    Nulla vitae elit libero, a pharetra augue
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd26f02" class="c-block c-block--ratio-12-16" style="background-image:url('https://picsum.photos/680/1000?image=17');" data-uid="62beddfd26efd">

    
            <div class="c-block__body">

                            <div id="62beddfd2702c" class="c-tags" data-uid="62beddfd27028">
        
             
                <span class="c-tag c-tag--default">
                    2022-07-01 13:43
                </span>
                        </div>
            
                            <!-- typography.blade.php  -->
<span id="62beddfd27183" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd27180">
    Porta Ultricies
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd271bb" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd271b9">
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd271fb" class="c-block c-block--ratio-12-16" style="background-image:url('https://picsum.photos/680/1000?image=18');" data-uid="62beddfd271f8">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd272b2" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd272af">
    Nibh
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd27315" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd27312">
    Maecenas faucibus mollis interdum
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd2735c" class="c-block c-block--ratio-12-16" style="background-image:url('https://picsum.photos/680/1000?image=19');" data-uid="62beddfd2735a">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd273ee" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd273eb">
    Ornare Malesuada
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd27421" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd2741f">
    Curabitur blandit tempus porttitor
</h2>            
            
        </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/680/1000?image=15',
                '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/680/1000?image=16',
                '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/680/1000?image=17',
                '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/680/1000?image=18',
                '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/680/1000?image=19',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
</div>

Block ratio 4:3


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Etiam Tristique Magna Nullam

Justo Nibh Condimentum


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Ultricies

Nulla vitae elit libero, a pharetra augue


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Porta Risus Venenatis

Nullam quis risus eget urna mollis ornare vel eu leo


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Adipiscing Fusce

Justo Elit Tortor


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
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">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<a href="#" id="62beddfd27777" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=10');" data-uid="62beddfd27774">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd27829" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd27814">
    Etiam Tristique Magna Nullam
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd27880" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd2787d">
    Justo Nibh Condimentum
</h2>            
            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd278c0" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=11');" data-uid="62beddfd278be">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd27950" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd2794e">
    Ultricies
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd27985" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd27983">
    Nulla vitae elit libero, a pharetra augue
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd279f0" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=12');" data-uid="62beddfd279ed">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd27b3b" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd27b39">
    Porta Risus Venenatis
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd27b6e" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd27b6c">
    Nullam quis risus eget urna mollis ornare vel eu leo
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd27ba9" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=13');" data-uid="62beddfd27ba7">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd27c2c" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd27c2a">
    Adipiscing Fusce
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd27c5e" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd27c5c">
    Justo Elit Tortor
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd27c96" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=14');" data-uid="62beddfd27c93">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd27d15" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd27d13">
    Euismod
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd27d47" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd27d44">
    Donec ullamcorper nulla non metus auctor fringilla
</h2>            
            
        </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/680/510?image=10',
                '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/680/510?image=11',
                '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/680/510?image=12',
                '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/680/510?image=13',
                '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/680/510?image=14',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
</div>

Block ratio 4:3, without spacing between blocks


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Parturient Ultricies

Purus Tellus


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Nibh Sit

Donec id elit non mi porta gravida at eget metus


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Commodo Fringilla

Lorem ipsum dolor sit amet, consectetur adipiscing elit


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Ullamcorper Euismod Pharetra

Maecenas sed diam eget risus varius blandit sit amet non magna


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
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">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<a href="#" id="62beddfd28061" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=88');" data-uid="62beddfd2805e">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd280f6" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd280f3">
    Parturient Ultricies
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd28161" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd2815d">
    Purus Tellus
</h2>            
            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd281ac" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=87');" data-uid="62beddfd281aa">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd2823c" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd28239">
    Nibh Sit
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd2826d" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd2826b">
    Donec id elit non mi porta gravida at eget metus
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd282c9" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=32');" data-uid="62beddfd282c5">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd28363" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd28360">
    Commodo Fringilla
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd28398" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd28395">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd283d2" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=33');" data-uid="62beddfd283d0">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd28455" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd28452">
    Ullamcorper Euismod Pharetra
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd28486" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd28483">
    Maecenas sed diam eget risus varius blandit sit amet non magna
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd284bd" class="c-block c-block--ratio-4-3" style="background-image:url('https://picsum.photos/680/510?image=34');" data-uid="62beddfd284bb">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd2853c" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd28539">
    Amet
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd2856c" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd2856a">
    Pharetra Etiam
</h2>            
            
        </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/680/510?image=88',
                '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/680/510?image=87',
                '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/680/510?image=32',
                '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/680/510?image=33',
                '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/680/510?image=34',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
</div>

Block without a image


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Ultricies

Nibh Dolor Bibendum Vehicula Amet


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Malesuada Parturient Dolor

Nulla vitae elit libero, a pharetra augue


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Porta Ultricies, Malesuada Parturient Dolor, Ultricies

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


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
Nibh

Maecenas faucibus mollis interdum


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
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">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<a href="#" id="62beddfd28808" class="c-block c-block--ratio-12-16" data-uid="62beddfd28805">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd288c8" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd288c2">
    Ultricies
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd2891e" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd2891b">
    Nibh Dolor Bibendum Vehicula Amet
</h2>            
            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd28962" class="c-block c-block--ratio-12-16" data-uid="62beddfd28960">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd289ea" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd289e7">
    Malesuada Parturient Dolor
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd28a1b" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd28a19">
    Nulla vitae elit libero, a pharetra augue
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd28a54" class="c-block c-block--ratio-12-16" data-uid="62beddfd28a51">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd28ad4" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd28ad2">
    Porta Ultricies, Malesuada Parturient Dolor, Ultricies
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd28b04" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd28b02">
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd28b3d" class="c-block c-block--ratio-12-16" data-uid="62beddfd28b3b">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd28bb8" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd28bb6">
    Nibh
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd28bee" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd28be8">
    Maecenas faucibus mollis interdum
</h2>            
            
        </div>
        
</div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg">
        <br />
<b>Notice</b>:  Undefined variable: hasPlaceholder in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php</b> on line <b>20</b><br />
<!-- block.blade.php -->
<div href="" id="62beddfd28c4c" class="c-block c-block--ratio-12-16" data-uid="62beddfd28c4a">

    
            <div class="c-block__body">

            
                            <!-- typography.blade.php  -->
<span id="62beddfd28cd0" class="c-typography c-block__meta c-typography__variant--meta" data-uid="62beddfd28cce">
    Ornare Malesuada
</span>            
                            <!-- typography.blade.php  -->
<h2 id="62beddfd28d04" class="c-typography c-block__heading c-typography__variant--h2" data-uid="62beddfd28d01">
    Curabitur blandit tempus porttitor
</h2>            
            
        </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
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.
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