Foobar UI gives you a set of commonly-used components which you can easily use in your project. Just add this in your html:
<link rel="stylesheet" href="https://foobar-ui.netlify.app/styles/foobar-ui.css">
<link rel="stylesheet" href="https://foobar-ui.netlify.app/styles/foobar-ui.min.css">
Foobar UI uses the below set of five colors. You can easily overrride the CSS color variables if you want to use your custom colors. To quickstart, you can visit Coolors for selecting your custom set of colors.
Spacing gives consistent UX and provides visual hierarchy to the elements. 8px / 16px / 24px / 32px / 40px / 64px are different spacing used in the components.
Typography establishes a strong visual hierarchy, and set's the product's overall tone. For heading, Foobar UI uses Poppins and for text, Montserrat. You can go to google fonts to include the same in your project.
Utilities gives us few classes which we can use in order to give a style which is used a lot, and reduce the number of line in the stylesheets, e.g nobullets, flex-row, disabled, hide, invisible, etc.
An alert component displays an important message for a user without interrupting the user's task.
<div class="alert alert-success">
<span>I am a success alert</span>
</div>
<div class="alert alert-error">
<span>I am an error alert</span>
</div>
<div class="alert alert-warning">
<span>I am a warning alert</span>
</div>
<div class="alert alert-info">
<span>I am an info alert</span>
</div>
Avatar component displays user profile picture. When user profile picture is not available, Avatar displays initials as fallback.
<span class="avatar avatar-sm">
<img src="https://i.pravatar.cc/128" alt="Avatar" class="avatar__img">
</span>
<span class="avatar avatar-md">
<img src="https://i.pravatar.cc/128" alt="Avatar" class="avatar__img">
</span>
<span class="avatar avatar-lg">
<img src="https://i.pravatar.cc/128" alt="Avatar" class="avatar__img">
</span>
<span class="avatar avatar-sm">SD</span>
<span class="avatar avatar-md">SD</span>
<span class="avatar avatar-lg">SD</span>
Badge is a small circle indicating number at the top-right of the icon or avatar.
<span class="badge">
<i class="fa-solid fa-house"></i>
<span class="badge-anchor">9</span>
</span>
<span class="badge">
<i class="fa-solid fa-house"></i>
<span class="badge-anchor">99</span>
</span>
<span class="badge">
<i class="fa-solid fa-house"></i>
<span class="badge-anchor">999</span>
</span>
<span class="badge">
<span class="avatar avatar-sm">
<img src="https://i.pravatar.cc/128" alt="Avatar" class="avatar__img">
</span>
<span class="badge-anchor-avatar"></span>
</span>
<span class="badge">
<span class="avatar avatar-md">
<img src="https://i.pravatar.cc/128" alt="Avatar" class="avatar__img">
</span>
<span class="badge-anchor-avatar"></span>
</span>
<span class="badge">
<span class="avatar avatar-lg">
<img src="https://i.pravatar.cc/128" alt="Avatar" class="avatar__img">
</span>
<span class="badge-anchor-avatar"></span>
</span>
Button component lets you add standard buttons and links with a consistent design.
<button class="btn btn-primary">Button</button>
<a class="btn btn-link" href="#button">Button</a>
<button class="btn btn-icon"><i class="fa-solid fa-star"></i></button>
<button class="btn btn-floating-action"><i class="fa-solid fa-plus"></i></button>
<button class="btn btn-primary" disabled="">Button</button>
<a class="btn btn-link disabled" href="#button">Button</a>
<button class="btn btn-icon" disabled=""><i class="fa-solid fa-star"></i></button>
<button class="btn btn-floating-action" disabled="">
<i class="fa-solid fa-plus"></i>
</button>
Card component gives you a way to add content for a single subject.
<div class="card">
<div class="card-content">
<img class="card-media" src="https://picsum.photos/600/400">
<div class="card-text">
<div class="card-title">Card Heading</div>
<div class="card-description">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Alias ducimus quisquam doloribus error quas veniam
iure ipsa molestias iste provident architecto voluptates.
</div>
</div>
</div>
<div class="card-action">
<button class="btn card-btn"><i class="fa-solid fa-heart"></i></button>
<button class="btn card-btn"><i class="fa-solid fa-close"></i></button>
</div>
</div>
<div class="card card_with-badge">
<div class="card-content">
<img class="card-media" src="https://picsum.photos/600/400">
<div class="card-text">
<div class="card-title">Card Heading</div>
<div class="card-description">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Alias ducimus quisquam doloribus error quas veniam
iure ipsa molestias iste provident architecto voluptates.
</div>
</div>
</div>
<div class="card-action">
<button class="btn card-btn"><i class="fa-solid fa-heart"></i></button>
<button class="btn card-btn"><i class="fa-solid fa-close"></i></button>
</div>
<span class="card-badge badge-anchor">99</span>
</div>
<div class="card card_text-overlay">
<div class="card-content">
<img class="card-media" src="https://picsum.photos/600/400">
<div class="card-text">
<div class="card-title">Card Heading</div>
<div class="card-description">Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
</div>
<div class="card-action">
<button class="btn card-btn"><i class="fa-solid fa-heart"></i></button>
<button class="btn card-btn"><i class="fa-solid fa-close"></i></button>
</div>
</div>
<div class="card card_text-only">
<div class="card-content">
<img class="card-media" src="https://picsum.photos/600/400">
<div class="card-text">
<div class="card-title">Card Heading</div>
<div class="card-description">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Alias ducimus quisquam doloribus error quas veniam
iure ipsa molestias iste provident architecto voluptates.
</div>
</div>
</div>
<div class="card-action">
<button class="btn card-btn"><i class="fa-solid fa-heart"></i></button>
<button class="btn card-btn"><i class="fa-solid fa-close"></i></button>
</div>
</div>
<div class="card card_horizontal">
<div class="card-content">
<img class="card-media" src="https://picsum.photos/600/400">
<div class="card-text">
<div class="card-title">Card Heading</div>
<div class="card-description">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Alias ducimus quisquam doloribus error quas veniam
iure ipsa molestias iste provident architecto voluptates.
</div>
</div>
</div>
<div class="card-action">
<button class="btn card-btn"><i class="fa-solid fa-heart"></i></button>
<button class="btn card-btn"><i class="fa-solid fa-close"></i></button>
</div>
</div>
<div class="card card_with-shadow">
<div class="card-content">
<img class="card-media" src="https://picsum.photos/600/400">
<div class="card-text">
<div class="card-title">Card Heading</div>
<div class="card-description">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Alias ducimus quisquam doloribus error quas veniam
iure ipsa molestias iste provident architecto voluptates.
</div>
</div>
</div>
<div class="card-action">
<button class="btn card-btn"><i class="fa-solid fa-heart"></i></button>
<button class="btn card-btn"><i class="fa-solid fa-close"></i></button>
</div>
</div>
Image component embeds an image into the document. It can be responsive and/or round.
<img class="img-responsive" src="https://picsum.photos/800/600" alt="Random image from picsum">
<img class="img-round" src="https://picsum.photos/800/600" alt="Random image from picsum">
Input component adds styles for textbox, can also be used with validation and error styles.
<div class="textbox">
<label for="username">Username</label>
<input type="text" name="username" id="username">
</div>
<div class="textbox textbox-required">
<label for="firstname">First Name<sup>*</sup></label>
<input type="text" name="firstname" id="firstname" required="">
</div>
<div class="textbox textbox-error">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="textbox textbox-validated">
<label for="postalcode">Postal Code</label>
<input type="text" name="postalcode" id="postalcode">
</div>
Text utilities gives various styles for text like headings, small text, gray text, center text.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Small Text
Gray Text
Center Text
<h1 class="heading-1">Heading 1</h1>
<h1 class="heading-2">Heading 2</h1>
<h1 class="heading-3">Heading 3</h1>
<h1 class="heading-4">Heading 4</h1>
<h1 class="heading-5">Heading 5</h1>
<p class="text-1">Lorem Ipsum</p>
<p class="text-2">Lorem Ipsum</p>
<p class="text-3">Lorem Ipsum</p>
<p class="text-4">Lorem Ipsum</p>
<p class="text-5">Lorem Ipsum</p>
<p class="text-small">Small Text</p>
<p class="text-gray">Gray Text</p>
<p class="text-center">Center Text</p>
Rating gives you a way to add ratings in your project. Usually used for showing/giving ratings to products in e-commerce.
<span class="rating">
<span class="rating-star icon-filled" data-number="1"><i class="fa-solid fa-star"></i></span>
<span class="rating-star icon-filled" data-number="2"><i class="fa-solid fa-star"></i></span>
<span class="rating-star icon-filled" data-number="3"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="4"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="5"><i class="fa-solid fa-star"></i></span>
</span>
<span class="rating disabled">
<span class="rating-star icon-filled" data-number="1"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="2"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="3"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="4"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="5"><i class="fa-solid fa-star"></i></span>
</span>
<span class="rating">
<span class="rating-star" data-number="1"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="2"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="3"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="4"><i class="fa-solid fa-star"></i></span>
<span class="rating-star" data-number="5"><i class="fa-solid fa-star"></i></span>
</span>
Simplified Grid component gives you the way to add two-column and three-column grids to your project.
<div class="grid-2">
<div class="grid-col">Col 1</div>
<div class="grid-col">Col 2</div>
</div>
<div class="grid-3">
<div class="grid-col">Col 1</div>
<div class="grid-col">Col 2</div>
<div class="grid-col">Col 3</div>
</div>