Getting Started

Installation

Copy-paste the below stylesheet into your head element before all other stylesheets.

https://compact-css.netlify.app/Components/Util/util.css

view raw Installation hosted with ❤ by GitHub

Contributing

Please visit our GitHub Repository to learn how you can contribute to this project.
(contribution guidelines will be listed)

Any sort of Contribution is welcomed!

Alert

Alerts are used to communicate a state that affects a system, feature or page.

Simple Alert

There was an error processing your request.

Data uploaded to the server. Fire on!

Seems your account is about to expire.

Event is going live on July 30th. Get ready!

	<div class="alert alert-danger">
	<i class="fas fa-exclamation-circle"></i>
	<p>There was an error processing your request.</p>
	</div>
	<div class="alert alert-success">
	<i class="fas fa-check-circle"></i>
	<p>Data uploaded to the server. Fire on!</p>
	</div>
	<div class="alert alert-warning">
	<i class="fas fa-exclamation-triangle"></i>
	<p>Seems your account is about to expire.</p>
	</div>
	<div class="alert alert-info">
	<i class="fas fa-info-circle"></i>
	<p>Event is going live on July 30th. Get ready!</p>
	</div>

view raw simple-alert hosted with ❤ by GitHub

Outline Alert

There was an error processing your request.

Data uploaded to the server. Fire on!

Seems your account is about to expire.

Event is going live on July 30th. Get ready!

	<div class="alert outline-alert-danger">
	<i class="fas fa-exclamation-circle"></i>
	<p>There was an error processing your request.</p>
	</div>
	<div class="alert outline-alert-success">
	<i class="fas fa-check-circle"></i>
	<p>Data uploaded to the server. Fire on!</p>
	</div>
	<div class="alert outline-alert-warning">
	<i class="fas fa-exclamation-triangle"></i>
	<p>Seems your account is about to expire.</p>
	</div>
	<div class="alert outline-alert-info">
	<i class="fas fa-info-circle"></i>
	<p>Event is going live on July 30th. Get ready!</p>
	</div>

view raw outline-alert hosted with ❤ by GitHub

Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Usage

	<img src="http://bit.ly/Tanay-Pratap" class="avatar">
	<img src="https://bit.ly/dan-abramov" class="avatar">
	<img src="https://bit.ly/kent-c-dodds" class="avatar">
	<img src="https://bit.ly/sage-adebayo" class="avatar">

view raw avatar hosted with ❤ by GitHub

Avatar Sizes

	<img src="http://bit.ly/Tanay-Pratap" class="avatar sm">
	<img src="http://bit.ly/Tanay-Pratap" class="avatar md">
	<img src="http://bit.ly/Tanay-Pratap" class="avatar lg">
	<img src="http://bit.ly/Tanay-Pratap" class="avatar xl">
	<img src="http://bit.ly/Tanay-Pratap" class="avatar xxl">

view raw avatar-sizes hosted with ❤ by GitHub

Avatar with badge

	<div class="avatar-badge">
	<img src="http://bit.ly/Tanay-Pratap" alt="Tanay-Pratap" class="avatar">
	<div class="badge-online"></div>
	</div>
	<div class="avatar-badge">
	<img src="https://bit.ly/kent-c-dodds" alt="kent-c-dodds" class="avatar">
	<div class="badge-dnd"></div>
	</div>
	<div class="avatar-badge">
	<img src="https://bit.ly/code-beast" alt="code-beasto" class="avatar">
	<div class="badge-idle"></div>
	</div>

view raw avatar-with-badge hosted with ❤ by GitHub

Badge

Badges are used to highlight an item's status for quick recognition.

Usage

DEFAULT

<small class="badge">default</small>

view raw badge hosted with ❤ by GitHub

Badge Color

DEFAULT SUCCESS REMOVED NEW

	<small class="badge">DEFAULT</small>
	<small class="badge badge-success">SUCCESS</small>
	<small class="badge badge-removed">REMOVED</small>
	<small class="badge badge-new">NEW</small>

view raw badge-color hosted with ❤ by GitHub

Badge Variants

DEFAULT DEFAULT DEFAULT

	<small class="badge outline-badge">DEFAULT</small>
	<small class="badge solid-badge">DEFAULT</small>
	<small class="badge subtle-badge">DEFAULT</small>

view raw badge-variants hosted with ❤ by GitHub

Badge Sizes

DEFAULT DEFAULT DEFAULT

	<small class="badge sm-badge">DEFAULT</small>
	<small class="badge md-badge">DEFAULT</small>
	<small class="badge lg-badge">DEFAULT</small>

view raw badge-sizes hosted with ❤ by GitHub

Button

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Usage

<button class="btn">Button</button>

view raw button hosted with ❤ by GitHub

Button Variation

	<button class="btn btn-primary">Primary</button>
	<button class="btn btn-secondary">Secondary</button>
	<button class="btn btn-error">Error</button>
	<button class="btn btn-success">Success</button>
	<button class="btn btn-warning">Warning</button>

view raw button-variation hosted with ❤ by GitHub

Outline Button

	<button class="btn">Default</button>
	<button class="btn outline-btn-primary">Primary</button>
	<button class="btn outline-btn-error">Error</button>
	<button class="btn outline-btn-success">Success</button>
	<button class="btn outline-btn-warning">Warning</button>

view raw outline-button hosted with ❤ by GitHub

Icon Button

	<button class="btn icon-btn">
	<i class="fab fa-twitter"></i>
	Twitter
	</button>

view raw icon-button hosted with ❤ by GitHub

Card

Cards contain content and actions about a single subject. Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Simple Card

The Powerpuff Girls

The Powerpuff Girls is an American superhero animated television series.

	<div class="card">
	<div class="card-heading">The Powerpuff Girls</div>
	<div class="card-content">The Powerpuff Girls is an American
	superhero animated television series.
	</div>
	</div>

view raw simple-card hosted with ❤ by GitHub

Image Card

The Powerpuff Girls

The Powerpuff Girls is an American superhero animated television series.

	<div class="card">
	<img class="img-card" src="https://bit.ly/3frqtoo">
	<div class="card-heading">The Powerpuff Girls</div>
	<div class="card-content">The Powerpuff Girls is an American
	superhero animated television series.
	</div>
	</div>

view raw image-card hosted with ❤ by GitHub

eCommerce Card

Kook N Keech

Pure Cotton Printed T-shirt

Rs. 499 Rs. 999 (50% OFF)

	<div class=" card e-comm-card">
	<img class="img-card" src="https://bit.ly/2PKuPw0">
	<div class="e-comm-like">
	<i class="far fa-heart"></i>
	</div>
	<div class="e-comm-title">Kook N Keech</div>
	<small class="e-comm-content">Pure Cotton Printed T-shirt
	</small>
	<div class="e-comm-price">
	<small>Rs. 499</small>
	<small class="e-comm-price-cut">Rs. 999</small>
	<small class="e-comm-disc">(50% OFF)</small>
	</div>
	<button class="btn btn-primary e-comm-btn">
	Add to Cart
	</button>
	</div>

view raw e-comm-card hosted with ❤ by GitHub

eCommerce Card with badge

NEW

Kook N Keech

Pure Cotton Printed T-shirt

Rs. 499 Rs. 999 (50% OFF)

	<div class=" card e-comm-card">
	<img class="img-card" src="https://bit.ly/2PKuPw0">
	<div class="e-comm-like">
	<i class="far fa-heart"></i>
	</div>
	<small class="badge solid-badge e-comm-badge">
	NEW
	</small>
	<div class="e-comm-title">Kook N Keech</div>
	<small class="e-comm-content">
	Pure Cotton Printed T-shirt
	</small>
	<div class="e-comm-price">
	<small>Rs. 499</small>
	<small class="e-comm-price-cut">Rs. 999</small>
	<small class="e-comm-disc">(50% OFF)</small>
	</div>
	<button class="btn btn-primary e-comm-btn">
	Add to Cart
	</button>
	</div>

view raw e-comm-card-with-badge hosted with ❤ by GitHub

Image

Coming Soon...

Input

Coming Soon...

List

Coming Soon...