Box

The Box component provides a reusable pattern for box in the interface.

A basic box

Purus Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Purus Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Purus Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

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

    
            <div class="c-box__body">

            
            
            
            
                        
            
                                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-box__heading c-typography__variant--h2" data-uid="69f0d0ae8b982" data-component="typography">
    Purus Tellus
</h2>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-box__content c-typography__variant--p" data-uid="69f0d0ae8b9cd" data-component="typography">
    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 class="c-box c-box--ratio-1-1" href="#" data-uid="69f0d0ae8ba1c" data-component="box">

    
            <div class="c-box__body">

            
            
            
            
                        
            
                                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-box__heading c-typography__variant--h2" data-uid="69f0d0ae8ba4d" data-component="typography">
    Purus Tellus
</h2>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-box__content c-typography__variant--p" data-uid="69f0d0ae8ba7b" data-component="typography">
    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 class="c-box c-box--ratio-1-1" href="#" data-uid="69f0d0ae8bab1" data-component="box">

    
            <div class="c-box__body">

            
            
            
            
                        
            
                                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-box__heading c-typography__variant--h2" data-uid="69f0d0ae8bade" data-component="typography">
    Purus Tellus
</h2>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-box__content c-typography__variant--p" data-uid="69f0d0ae8bb09" data-component="typography">
    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.

Purus Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Purus Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Purus Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

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

    
            <div class="c-box__body">

            
            
            
            
                        
            
                                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-box__heading c-typography__variant--h2" data-uid="69f0d0ae8beba" data-component="typography">
    Purus Tellus
</h2>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-box__content c-typography__variant--p" data-uid="69f0d0ae8beea" data-component="typography">
    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 class="c-box c-box--ratio-1-1" href="#" data-uid="69f0d0ae8bf1e" data-component="box">

    
            <div class="c-box__body">

            
            
            
            
                        
            
                                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-box__heading c-typography__variant--h2" data-uid="69f0d0ae8bf48" data-component="typography">
    Purus Tellus
</h2>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-box__content c-typography__variant--p" data-uid="69f0d0ae8bf70" data-component="typography">
    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 class="c-box c-box--ratio-1-1" href="#" data-uid="69f0d0ae8bf9f" data-component="box">

    
            <div class="c-box__body">

            
            
            
            
                        
            
                                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-box__heading c-typography__variant--h2" data-uid="69f0d0ae8bfc6" data-component="typography">
    Purus Tellus
</h2>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-box__content c-typography__variant--p" data-uid="69f0d0ae8bfeb" data-component="typography">
    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.

Purus Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Purus Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Purus Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

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

    
            <div class="c-box__body">

            
                                <!-- icon.blade.php -->
    <span class="c-icon c-box__icon c-icon--card-membership c-icon--material c-icon--material-card_membership material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="card_membership" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0ae8c4bc" data-component="icon">
                    </span>
            
            
            
                        
            
                                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-box__heading c-typography__variant--h2" data-uid="69f0d0ae8c503" data-component="typography">
    Purus Tellus
</h2>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-box__content c-typography__variant--p" data-uid="69f0d0ae8c532" data-component="typography">
    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 class="c-box c-box--ratio-1-1" href="#" data-uid="69f0d0ae8c568" data-component="box">

    
            <div class="c-box__body">

            
                                <!-- icon.blade.php -->
    <span class="c-icon c-box__icon c-icon--dynamic-form c-icon--material c-icon--material-dynamic_form material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="dynamic_form" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0ae8c59a" data-component="icon">
                    </span>
            
            
            
                        
            
                                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-box__heading c-typography__variant--h2" data-uid="69f0d0ae8c5cc" data-component="typography">
    Purus Tellus
</h2>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-box__content c-typography__variant--p" data-uid="69f0d0ae8c5f5" data-component="typography">
    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 class="c-box c-box--ratio-1-1" href="#" data-uid="69f0d0ae8c624" data-component="box">

    
            <div class="c-box__body">

            
                                <!-- icon.blade.php -->
    <span class="c-icon c-box__icon c-icon--donut-small c-icon--material c-icon--material-donut_small material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="donut_small" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0ae8c651" data-component="icon">
                    </span>
            
            
            
                        
            
                                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-box__heading c-typography__variant--h2" data-uid="69f0d0ae8c681" data-component="typography">
    Purus Tellus
</h2>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-box__content c-typography__variant--p" data-uid="69f0d0ae8c6a8" data-component="typography">
    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>

API

Parameter	Default	Description
heading		The heading of the block
content		Short text to describe target content.
meta		String or array of strings containing the meta information
secondaryMeta		String or array of strings containing the secondary meta information
link		Simple href link
ratio	1:1	Ratio of the block
date		Preformatted date
dateBadge		Display date as a badge.
image	false	Image object (see image component), svg or raster image.
icon		Icon name as a string.

CSS API

Variable	Default	Type	Values	Description
--c-box--border-radius	var(--border-radius)	range	-	Border Radius
--c-box--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-box--color--primary	var(--color--primary)	color	-	Primary
--c-box--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-box--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-box--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-box--color--primary-contrast	var(--color--primary-contrast)	color	-	Primary Contrast
--c-box--font-size-400	var(--font-size-400)	range	-	Three steps above base in the type scale. Equivalent to h4.

Similar components

Block Button Fab