Card Components

Default Card

This is the card content. You can place any information here that you want to display in the card body.

The card follows BEM naming conventions with proper structure including header, body, and footer sections.

<div class="card"> <div class="card__header"> <h4 class="card__title">Card Title</h4> <button class="btn btn-icon card__close"> <i data-lucide="x"></i> </button> </div> <div class="card__body"> <p> This is the card content. You can place any information here that you want to display in the card body. </p> <p> The card follows BEM naming conventions with proper structure including header, body, and footer sections. </p> </div> <div class="card__footer"> <button class="btn btn-gradient">Cose</button> <button class="btn btn-gradient">Save</button> </div> </div>

Card sm

This is the card content. You can place any information here that you want to display in the card body.

The card follows BEM naming conventions with proper structure including header, body, and footer sections.

<div class="card card--sm"> <div class="card__header"> <h4 class="card__title">Card Title</h4> <button class="btn btn-icon card__close"> <i data-lucide="x"></i> </button> </div> <div class="card__body"> <p> This is the card content. You can place any information here that you want to display in the card body. </p> <p> The card follows BEM naming conventions with proper structure including header, body, and footer sections. </p> </div> <div class="card__footer"> <button class="btn btn-gradient">Cose</button> <button class="btn btn-gradient">Save</button> </div> </div>

Card md

This is the card content. You can place any information here that you want to display in the card body.

The card follows BEM naming conventions with proper structure including header, body, and footer sections.

<div class="card card--md"> <div class="card__header"> <h4 class="card__title">Card Title</h4> <button class="btn btn-icon card__close"> <i data-lucide="x"></i> </button> </div> <div class="card__body"> <p> This is the card content. You can place any information here that you want to display in the card body. </p> <p> The card follows BEM naming conventions with proper structure including header, body, and footer sections. </p> </div> <div class="card__footer"> <button class="btn btn-gradient">Cose</button> <button class="btn btn-gradient">Save</button> </div> </div>

Card lg

This is the card content. You can place any information here that you want to display in the card body.

The card follows BEM naming conventions with proper structure including header, body, and footer sections.

<div class="card card--lg"> <div class="card__header"> <h4 class="card__title">Card Title</h4> <button class="btn btn-icon card__close"> <i data-lucide="x"></i> </button> </div> <div class="card__body"> <p> This is the card content. You can place any information here that you want to display in the card body. </p> <p> The card follows BEM naming conventions with proper structure including header, body, and footer sections. </p> </div> <div class="card__footer"> <button class="btn btn-gradient">Cose</button> <button class="btn btn-gradient">Save</button> </div> </div>

Card xl

This is the card content. You can place any information here that you want to display in the card body.

The card follows BEM naming conventions with proper structure including header, body, and footer sections.

<div class="card card--xl"> <div class="card__header"> <h4 class="card__title">Card Title</h4> <button class="btn btn-icon card__close"> <i data-lucide="x"></i> </button> </div> <div class="card__body"> <p> This is the card content. You can place any information here that you want to display in the card body. </p> <p> The card follows BEM naming conventions with proper structure including header, body, and footer sections. </p> </div> <div class="card__footer"> <button class="btn btn-gradient">Cose</button> <button class="btn btn-gradient">Save</button> </div> </div>

Card with Image

This is the card content. You can place any information here that you want to display in the card body.

The card follows BEM naming conventions with proper structure including header, body, and footer sections.

<div class="card"> <img class="card__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User card" /> <div class="card__header"> <h4 class="card__title">Card Title</h4> <button class="btn btn-icon card__close"> <i data-lucide="x"></i> </button> </div> <div class="card__body"> <p> This is the card content. You can place any information here that you want to display in the card body. </p> <p> The card follows BEM naming conventions with proper structure including header, body, and footer sections. </p> </div> <div class="card__footer"> <button class="btn btn-gradient">Cose</button> <button class="btn btn-gradient">Save</button> </div> </div>

Card with Image on Left

This is the card content. You can place any information here that you want to display in the card body.

The card follows BEM naming conventions with proper structure including header, body, and footer sections.

<div class="card card__img--left"> <img class="card__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User card" /> <div class="card__content"> <div class="card__header"> <h4 class="card__title">Card Title</h4> <button class="btn btn-icon card__close"> <i data-lucide="x"></i> </button> </div> <div class="card__body"> <p> This is the card content. You can place any information here that you want to display in the card body. </p> <p> The card follows BEM naming conventions with proper structure including header, body, and footer sections. </p> </div> <div class="card__footer"> <button class="btn btn-gradient">Cose</button> <button class="btn btn-gradient">Save</button> </div> </div> </div>

Card with Image overlay

This is the card content. You can place any information here that you want to display in the card body.

The card follows BEM naming conventions with proper structure including header, body, and footer sections.

<div class="card card__img--overlay card--xl"> <img class="card__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User card" /> <div class="card__content"> <div class="card__header"> <h4 class="card__title">Card Title</h4> <button class="btn btn-icon card__close"> <i data-lucide="x"></i> </button> </div> <div class="card__body"> <p> This is the card content. You can place any information here that you want to display in the card body. </p> <p> The card follows BEM naming conventions with proper structure including header, body, and footer sections. </p> </div> <div class="card__footer"> <button class="btn btn-gradient">Cose</button> <button class="btn btn-gradient">Save</button> </div> </div> </div>