Box

Boxes are surfaces that display content and actions on a single topic, with a solid background color. They may be provided with an icon/svg image.

A basic box

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        <!-- block.blade.php -->
<a href="#" id="62bec6e1cf4cc" class="c-box c-box--ratio-1-1" data-uid="62bec6e1cf4c6">

    
            <div class="c-box__body">

            
            
            
            
                            <!-- typography.blade.php  -->
<h2 id="62bec6e1cfad4" class="c-typography c-box__heading c-typography__variant--h2" data-uid="62bec6e1cfacf">
    Purus Tellus
</h2>            
                            <!-- typography.blade.php  -->
<p id="62bec6e1cfb42" class="c-typography c-box__content c-typography__variant--p" data-uid="62bec6e1cfb3f">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        <!-- block.blade.php -->
<a href="#" id="62bec6e1cfba0" class="c-box c-box--ratio-1-1" data-uid="62bec6e1cfb9a">

    
            <div class="c-box__body">

            
            
            
            
                            <!-- typography.blade.php  -->
<h2 id="62bec6e1cfc95" class="c-typography c-box__heading c-typography__variant--h2" data-uid="62bec6e1cfc91">
    Purus Tellus
</h2>            
                            <!-- typography.blade.php  -->
<p id="62bec6e1cfcd9" class="c-typography c-box__content c-typography__variant--p" data-uid="62bec6e1cfcd6">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        <!-- block.blade.php -->
<a href="#" id="62bec6e1cfd14" class="c-box c-box--ratio-1-1" data-uid="62bec6e1cfd12">

    
            <div class="c-box__body">

            
            
            
            
                            <!-- typography.blade.php  -->
<h2 id="62bec6e1cfdae" class="c-typography c-box__heading c-typography__variant--h2" data-uid="62bec6e1cfdab">
    Purus Tellus
</h2>            
                            <!-- typography.blade.php  -->
<p id="62bec6e1cfddf" class="c-typography c-box__content c-typography__variant--p" data-uid="62bec6e1cfddd">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>            
        </div>
        
</a>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        @box([
            'heading' => 'Purus Tellus',
            'content' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            'link' => '#',
        ])
        @endbox
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        @box([
            'heading' => 'Purus Tellus',
            'content' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            'link' => '#',
        ])
        @endbox
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        @box([
            'heading' => 'Purus Tellus',
            'content' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            'link' => '#',
        ])
        @endbox
    </div>
</div>

Boxes with images

Simple box with images displayed in a grid with a desktiop width of three.

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        <!-- block.blade.php -->
<a href="#" id="62bec6e1d0085" class="c-box c-box--ratio-1-1" data-uid="62bec6e1d0081">

    
            <div class="c-box__body">

                            <!-- image.blade.php -->
<figure id="62bec6e1d01c1" class="c-image c-box__image c-image--type-jpg" data-uid="62bec6e1d01bd">
     
        <img src="/assets/img/993-300x200.jpg" alt="Placeholder image" class="c-image__image "  />
            </figure>

            
            
            
            
                            <!-- typography.blade.php  -->
<h2 id="62bec6e1d0226" class="c-typography c-box__heading c-typography__variant--h2" data-uid="62bec6e1d0222">
    Purus Tellus
</h2>            
                            <!-- typography.blade.php  -->
<p id="62bec6e1d0259" class="c-typography c-box__content c-typography__variant--p" data-uid="62bec6e1d0256">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        <!-- block.blade.php -->
<a href="#" id="62bec6e1d0292" class="c-box c-box--ratio-1-1" data-uid="62bec6e1d0290">

    
            <div class="c-box__body">

                            <!-- image.blade.php -->
<figure id="62bec6e1d032d" class="c-image c-box__image c-image--type-jpg" data-uid="62bec6e1d032a">
     
        <img src="/assets/img/993-300x200.jpg" alt="Placeholder image" class="c-image__image "  />
            </figure>

            
            
            
            
                            <!-- typography.blade.php  -->
<h2 id="62bec6e1d0365" class="c-typography c-box__heading c-typography__variant--h2" data-uid="62bec6e1d0363">
    Purus Tellus
</h2>            
                            <!-- typography.blade.php  -->
<p id="62bec6e1d0396" class="c-typography c-box__content c-typography__variant--p" data-uid="62bec6e1d0394">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        <!-- block.blade.php -->
<a href="#" id="62bec6e1d03cc" class="c-box c-box--ratio-1-1" data-uid="62bec6e1d03ca">

    
            <div class="c-box__body">

                            <!-- image.blade.php -->
<figure id="62bec6e1d0489" class="c-image c-box__image c-image--type-jpg" data-uid="62bec6e1d0485">
     
        <img src="/assets/img/993-300x200.jpg" alt="Placeholder image" class="c-image__image "  />
            </figure>

            
            
            
            
                            <!-- typography.blade.php  -->
<h2 id="62bec6e1d04dc" class="c-typography c-box__heading c-typography__variant--h2" data-uid="62bec6e1d04d8">
    Purus Tellus
</h2>            
                            <!-- typography.blade.php  -->
<p id="62bec6e1d0532" class="c-typography c-box__content c-typography__variant--p" data-uid="62bec6e1d052e">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>            
        </div>
        
</a>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        @box([
            'heading' => 'Purus Tellus',
            'content' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            'link' => '#',
            'image' => [
                'src' => '/assets/img/993-300x200.jpg',
                'alt' => 'Placeholder image',       
            ]
        ])
        @endbox
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        @box([
            'heading' => 'Purus Tellus',
            'content' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            'link' => '#',
            'image' => [
                'src' => '/assets/img/993-300x200.jpg',
                'alt' => 'Placeholder image',       
            ]
        ])
        @endbox
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        @box([
            'heading' => 'Purus Tellus',
            'content' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            'link' => '#',
            'image' => [
                'src' => '/assets/img/993-300x200.jpg',
                'alt' => 'Placeholder image',       
            ]
        ])
        @endbox
    </div>
</div>

Boxes with icons

A box with an icon, is simply a box with an svg image.

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        <!-- block.blade.php -->
<a href="#" id="62bec6e1d07cc" class="c-box c-box--ratio-1-1" data-uid="62bec6e1d07c9">

    
            <div class="c-box__body">

            
                            <!-- icon.blade.php -->
    <i id="62bec6e1d08b1" class="c-icon c-box__icon c-icon--size-inherit material-icons" translate="no" role="img" alt="" data-uid="62bec6e1d08ac">
                    card_membership
            </i>
            
            
            
                            <!-- typography.blade.php  -->
<h2 id="62bec6e1d08f6" class="c-typography c-box__heading c-typography__variant--h2" data-uid="62bec6e1d08f3">
    Purus Tellus
</h2>            
                            <!-- typography.blade.php  -->
<p id="62bec6e1d0927" class="c-typography c-box__content c-typography__variant--p" data-uid="62bec6e1d0925">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        <!-- block.blade.php -->
<a href="#" id="62bec6e1d0965" class="c-box c-box--ratio-1-1" data-uid="62bec6e1d0963">

    
            <div class="c-box__body">

            
                            <!-- icon.blade.php -->
    <i id="62bec6e1d09fd" class="c-icon c-box__icon c-icon--size-inherit material-icons" translate="no" role="img" alt="" data-uid="62bec6e1d09f9">
                    dynamic_form
            </i>
            
            
            
                            <!-- typography.blade.php  -->
<h2 id="62bec6e1d0a32" class="c-typography c-box__heading c-typography__variant--h2" data-uid="62bec6e1d0a30">
    Purus Tellus
</h2>            
                            <!-- typography.blade.php  -->
<p id="62bec6e1d0a60" class="c-typography c-box__content c-typography__variant--p" data-uid="62bec6e1d0a5e">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>            
        </div>
        
</a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        <!-- block.blade.php -->
<a href="#" id="62bec6e1d0a96" class="c-box c-box--ratio-1-1" data-uid="62bec6e1d0a94">

    
            <div class="c-box__body">

            
                            <!-- icon.blade.php -->
    <i id="62bec6e1d0b25" class="c-icon c-box__icon c-icon--size-inherit material-icons" translate="no" role="img" alt="" data-uid="62bec6e1d0b21">
                    donut_small
            </i>
            
            
            
                            <!-- typography.blade.php  -->
<h2 id="62bec6e1d0b57" class="c-typography c-box__heading c-typography__variant--h2" data-uid="62bec6e1d0b55">
    Purus Tellus
</h2>            
                            <!-- typography.blade.php  -->
<p id="62bec6e1d0b86" class="c-typography c-box__content c-typography__variant--p" data-uid="62bec6e1d0b84">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</p>            
        </div>
        
</a>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        @box([
            'heading' => 'Purus Tellus',
            'content' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            'link' => '#',
            'icon' => 'card_membership'
        ])
        @endbox
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        @box([
            'heading' => 'Purus Tellus',
            'content' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            'link' => '#',
            'icon' => 'dynamic_form'
        ])
        @endbox
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md">
        @box([
            'heading' => 'Purus Tellus',
            'content' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            'link' => '#',
            'icon' => 'donut_small'
        ])
        @endbox
    </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
link string - Simple href link
ratio 1:1 string - Ratio of the block
date false boolean - Preformatted date
image false boolean - Image object (see image component), svg or raster image.
icon false boolean - Icon name as a 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/Box/box.json