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-component="box">
    <div class="c-box__body">
      <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography c-box__heading c-typography__variant--h2" data-component="typography">
        Purus Tellus
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-box__content c-typography__variant--p" 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-component="box">
    <div class="c-box__body">
      <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography c-box__heading c-typography__variant--h2" data-component="typography">
        Purus Tellus
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-box__content c-typography__variant--p" 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-component="box">
    <div class="c-box__body">
      <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography c-box__heading c-typography__variant--h2" data-component="typography">
        Purus Tellus
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-box__content c-typography__variant--p" 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-component="box">
    <div class="c-box__body">
      <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography c-box__heading c-typography__variant--h2" data-component="typography">
        Purus Tellus
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-box__content c-typography__variant--p" 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-component="box">
    <div class="c-box__body">
      <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography c-box__heading c-typography__variant--h2" data-component="typography">
        Purus Tellus
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-box__content c-typography__variant--p" 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-component="box">
    <div class="c-box__body">
      <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography c-box__heading c-typography__variant--h2" data-component="typography">
        Purus Tellus
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-box__content c-typography__variant--p" 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-component="box">
    <div class="c-box__body">
      <!-- icon.blade.php -->
       <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography c-box__heading c-typography__variant--h2" data-component="typography">
        Purus Tellus
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-box__content c-typography__variant--p" 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-component="box">
    <div class="c-box__body">
      <!-- icon.blade.php -->
       <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography c-box__heading c-typography__variant--h2" data-component="typography">
        Purus Tellus
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-box__content c-typography__variant--p" 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-component="box">
    <div class="c-box__body">
      <!-- icon.blade.php -->
       <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography c-box__heading c-typography__variant--h2" data-component="typography">
        Purus Tellus
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-box__content c-typography__variant--p" 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	Type	Description
heading		string	The box heading.
content		string	The descriptive content.
meta		array\|string	The primary meta information.
secondaryMeta		array\|string	The secondary meta information.
link		string	The optional target URL.
ratio	1:1	string	The box aspect ratio.
date		array\|string	The preformatted date or Date component attributes.
dateBadge	null	?boolean	Whether to display the date as a badge.
image	false	ComponentLibrary\Integrations\Image\ImageInterface\|array\|boolean	The image source or Image component attributes.
icon		array\|string\|boolean	The icon name or Icon component attributes.

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