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
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
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
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
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
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
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
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
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
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
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
Purus Tellus
Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Block/Block.php on line 20
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
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
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
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
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
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
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
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
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. |