Mazatlán International Center

Basic

Default

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.

Shadow

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.

View example's code

<div className="card">
  <div className="card-body">
    <h5 className="card-title">...</h5>
    <p className="card-text">...</p>
  </div>
</div>

<div className="card shadow-lg">
  <div className="card-body">
    <h5 className="card-title">...</h5>
    <p className="card-text">...</p>
  </div>
</div>

Color

Solid

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus.

Pale

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus.

Soft

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus.

View example's code

<div className="card shadow-none bg-primary text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-primary">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-primary">
  <div className="card-body">...</div>
</div>

<div className="card shadow-none bg-yellow text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-orange text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-red text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pink text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-violet text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-purple text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-blue text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-aqua text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-green text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-leaf text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-fuchsia text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-sky text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-grape text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-navy text-white">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-ash text-white">
  <div className="card-body">...</div>
</div>

<div className="card shadow-none bg-pale-yellow">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-orange">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-red">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-pink">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-violet">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-purple">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-blue">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-aqua">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-green">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-leaf">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-fuchsia">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-sky">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-grape">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-navy">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-pale-ash">
  <div className="card-body">...</div>
</div>

<div className="card shadow-none bg-soft-yellow">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-orange">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-red">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-pink">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-violet">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-purple">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-blue">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-aqua">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-green">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-leaf">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-fuchsia">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-sky">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-grape">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-navy">
  <div className="card-body">...</div>
</div>
<div className="card shadow-none bg-soft-ash">
  <div className="card-body">...</div>
</div>

Border

Available options:

border-primary, border-aqua, border-green, border-leaf, border-navy, border-orange, border-pink, border-purple, border-red, border-violet, border-yellow, border-fuchsia, border-sky, border-grape, border-soft-primary, border-soft-aqua, border-soft-green, border-soft-leaf, border-soft-navy, border-soft-orange, border-soft-pink, border-soft-purple, border-soft-red, border-soft-violet, border-soft-yellow, border-soft-fuchsia, border-soft-sky, border-soft-grape.

Start

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.

Top

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.

Bottom

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.

End

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.

View example's code

<div className="card card-border-start border-primary">
  <div className="card-body">...</div>
</div>

<div className="card shadow-lg card-border-top border-primary">
  <div className="card-body">...</div>
</div>

<div className="card bg-soft-primary card-border-end border-soft-primary">
  <div className="card-body">...</div>
</div>

<div className="card bg-soft-primary card-border-bottom border-primary">
  <div className="card-body">...</div>
</div>

Image

Image Cap Top

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.

Image Cap Bottom

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.

View example's code

<div className="card">
  <img className="card-img-top" src="..." alt="" />
  <div className="card-body">...</div>
</div>

<div className="card">
  <div className="card-body">...</div>
  <img className="card-img-bottom" src="..." alt="" />
</div>

Card

Basic

Default

Shadow

Color

Solid

Pale

Soft

Border

Start

Top

Bottom

End

Image

Image Cap Top

Image Cap Bottom

Piensa de forma única y sé creativo. Marca la diferencia con Sandbox.

Dirección

Teléfono

Correo Electrónico

Redes Sociales

PROJECT PAGES

SINGLE PROJECTS

Usage

Styleguide

Elements

Card

Basic

Default

Shadow

Color

Solid

Pale

Soft

Border

Start

Top

Bottom

End

Image

Image Cap Top

Image Cap Bottom

Piensa de forma única y sé creativo. Marca la diferencia con Sandbox.