Autumn Trees
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore asperiores quibusdam impedit
Installation
To start using the components in your project import the stylesheet in your html file.
<link rel="stylesheet" href="https://bubbles-nine.netlify.app/styles/components/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Or import this file in your main CSS file.
@import url(https://bubbles-nine.netlify.app/styles/components/index.css)
Colors
Bubble provides 23 colours to create a small pallete for the components available. You can use the variables names provided for your own custom styles. The background class names are exactly same as the variables names.
Primary Colors
--primary
#3b82f6
--secondary
##6b7280
--success
#22c55e
--danger
#ef4444
--warning
#eab308
--info
#06b6d4
--default
#19374d
Lighter Shades
--primaryLight
#bfdbfe
--secondaryLight
#e5e7eb
--successLight
#bbf7d0
--dangerLight
#fecaca
--warningLight
#fde68a
--infoLight
#a5f3fc
--defaultLight
#254e6e
Darker Shades
--primaryDark
#1e3a8a
--secondaryDark
#111827
--successDark
#14532d
--dangerDark
#7f1d1d
--warningDark
#78350f
--infoDark
#155e75
--defaultDark
#0d1e2999
Neutral Shades
--dark
#000000
--light
#f5f5f5
Typography
Default Font is set to Montserrat. Has 9 font weights - 100; 200; 300; 400; 500; 600; 700; 800; 900.
Headings
Classes : h1, h2, h3, h4, h5, h6
H1-Heading
H2-Heading
H3-Heading
H4-Heading
H5-Heading
H6-Heading
Text Alignement
Classes : center-aligned, left-aligned, right-aligned
Left Aligned
Center Aligned
Right Aligned
Text Colors
Classes : primary-text, danger-text, warning-text, success-text, secondary-text, default-text, info-text.
HI! I am Blue :)
Use me for error messages!
Use me for warning messages!
Use me for success messages!
Gray!
I am the default color of this library!
Use me for info messages!
Text Sizes
Classes : para-sm , para-md , para-lg .
Small para Text
Medium para Text
Large para TextSpecial Texts
Classes : text-strike, code-highlight, divider .
Text Striked Off
Use This if you want to hightlight some code or words.
Note: Divider will give a underline after any text or section, use it with div element.
Alerts
Bubble has 4 types of Alerts - success, warning, info and warning. To get the icons use the font awesome cdn. Icons are attached to special classes. alert is the base class.
Base Class - .alert
Basic Alerts
Additional Classes - alert-error, alert-info, alert-warning, alert-success
<article class="alert alert-error"> This is an error alert </article>
<article class="alert alert-info"> This is a info alert </article>
<article class="alert alert-warning"> This is an warning alert </article>
<article class="alert alert-success"> This is a success alert </article>
Outlined Alerts
Additional Classes - alert-error-outline, alert-info-outline, alert-warning-outline, alert-success-outline
<article class="alert alert-error-outline"> This is an error alert </article>
<article class="alert alert-info-outline"> This is a warning alert </article>
<article class="alert alert-warning-outline"> This is an info alert </article>
<article class="alert alert-success-outline"> This is a success alert </article>
Filled Alerts
Additional Classes - alert-error-filled, alert-info-filled, alert-warning-filled, alert-success-filled.
<article class="alert alert-error-filled"> This is an error alert </article>
<article class="alert alert-info-filled"> This is a warning alert </article>
<article class="alert alert-warning-filled"> This is an info alert </article>
<article class="alert alert-success-filled"> This is a success alert </article>
Action Alert
Alert with cancel option. Can be used with any of the above variant classes. Click the cancel button on second alert to check the demo. Only works for font awesome icon or X letter for cancel button.
<article class="alert alert-warning" id="demo-alert">
Warning alert!
<button class="alert-cancel"> <i class="fas fa-times"> </i> </button>
</article>
demoAlertCloseBtn = document.querySelector("#demo-alert .alert-cancel");
demoAlert = document.querySelector("#demo-alert");
showAlertButton = document.querySelector("#alert-demo-undoBtn");
demoAlertCloseBtn.addEventListener("click", () => {
demoAlert.style.visibility = "hidden";
});
showAlertButton.addEventListener("click", () => {
demoAlert.style.visibility = "visible";
});
Avatars
Avatar are images which can be used to show user's profile image.
Base Class - avatar
Image Avatars
Additional Class - avatar-img (add to image)
<figure class="avatar avatar-md">
<img
class="avatar-img"
src="https://weebofigurines.sirv.com/CL/tomioka.jpg"
alt="giyu_image"
/>
</figure>
Letter Avatars
Bubble supports letter avatars. Add the color classes to apply color to the avatars. This can be used with maximum of 2 letters.
Addition Class - avatar-letter
<figure class="avatar avatar-letter avatar-md defaultLight">
<span> RK </span>
</figure>
Avatar Sizes
An avatar can have any of the 3 sizes - small, medium and large.
Additional Classes - avatar-sm , avatar-md , avatar-lg
Icon Avatars
Icon avatars support images, svgs and font-awesome icons.
Additional Class - avatar-icon
<figure class="avatar avatar-icon avatar-lg success">
<img src="./assets/svgs/folder.svg" alt="svg">
</figure>
<figure class="avatar avatar-icon avatar-md warningLight">
<i class="far fa-bell"></i>
</figure>
Square Avatar
Additional Class - square
<figure class="avatar square avatar-lg">
<img
class="avatar-img"
src="https://weebofigurines.sirv.com/CL/rengoku.jpg"
alt="renguko_image"
/>
</figure>
Avatar with Border
Additional Class - avatar-border
<figure class="avatar avatar-border avatar-lg">
<img
class="avatar-img"
src="https://weebofigurines.sirv.com/CL/rengoku.jpg"
alt="renguko_image"
/>
</figure>
Badges
Badges are used to display a notification count or status information.
Base Class - badge
Status Badges
Three types of status are available - online, busy and offline.
Additional Classes - online, offline, busy.
<article class="badge">
<figure class="avatar avatar-lg">
<img
class="avatar-img"
src="https://weebofigurines.sirv.com/CL/tomioka.jpg"
alt="giyu_image"
/>
</figure>
<span class="busy"></span>
</article>
Icon Badges
Additional Classes - badge-icon, badge-count
9
9+
99+
3
<article class="badge">
<img class="badge-icon" src="" alt=""/>
<span class="badge-count info">3</span>
</article>
Button Badges
Button can also be made into badges.
<button class="btn btn-contained default badge">
Click Me! <span class="badge-count danger">3+</span>
</button>
Text with a Badge
Badges can be added to normal texts.
Text with a badge 9
Text with a badge 1+
<p class="badge"> Text with a badge
<span class="badge-count warning">1+</span>
</p>
Buttons
Buttons allow users to take actions, and make choices, with a single tap. Add the color classes to add color to the buttons.
Base Class - btn
Contained Buttons
These buttons are filled. They contain actions that are primary to your app. Available for both button and link elements. Has disabled state. You can also add font awesome icons.
Additional Class - btn-contained
<button class="btn btn-contained default">Button</button>
<a class="btn btn-contained warning"> Link </a>
<a class="btn btn-contained" disabled> Link Disabled </a>
Outlined Buttons
Supports 5 colors - success, warning, info, error and default. They contain actions that are important but aren't the primary action in an app. Available both for button and link elements.
Additional Classes: btn-success-outline , btn-warning-outline, btn-default-outline, btn-error-outline, btn-info-outline.
<button class="btn btn-success-outline">Button</button>
<a class="btn btn-error-outline"> Link </a>
Link Button
This is only for link elements.
Class: btn-link.
<a class="btn-link"> Link </a>
Icon Buttons
Available both for button and link element.
Base Class - btn-icon
Two size variants. Additional Class - btn-sm, btn-lg.
<a class="btn-icon btn-sm defaultDark">
<i class="fas fa-headset"<>/i>
</a>
<button class="btn-icon danger">
<i class="fas fa-cloud-download-alt"<>/i>
</button>
<a class="btn-icon btn-lg warning">
<i class="fas fa-headset"<>/i>
</a>
Floating Action Button
Available both for button and link element.
Base Class - btn-float.
Two size variants. Additional Class - btn-sm, btn-lg.
<button class="btn-float btn-sm primary">
<i class="fa-solid fa-pen-to-square"></i>
</button>
<a class="btn-float defaultLight"> + </a>
<a class="btn-float btn-lg danger">
<i class="fa-solid fa-trash"></i>
</a>
Block Buttons
Takes full width of container. Generally used in forms.
Additional Class - block-btn.
<button class="btn block-btn btn-contained success">
Block Button
</button>
Button Sizes
Three extra sizes are available - small, medium, large along with default size.
Additional Classes - btn-sm, btn-md, btn-lg.
Cards
Cards contain content and actions about a single subject.
Base Class - card
Text Only Card
Our Changing Planet
by Kurt Wagner
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore asperiores quibusdam impedit, sapiente sunt fugit doloremque at commodi repellendus atque.
<article class="card">
<header class="card-header" tabindex="0">
<div class="card-details">
<h5 class="h5">Our Changing Planet</h5>
<h6 class="h6">by Kurt Wagner</h6>
</div>
<p class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
inventore asperiores quibusdam impedit, sapiente sunt fugit
doloremque at commodi repellendus atque.
</p>
</header>
<footer class="card-actions">
<div class="card-buttongroup">
<button class="btn btn-contained btn-sm primaryLight">
Read
</button>
<button class="btn btn-contained btn-sm primaryLight">
Bookmark
</button>
</div>
<div class="card-buttongroup">
<button class="btn-float btn-sm secondaryLight">
<i class="far fa-heart"></i>
</button>
<button class="btn-float btn-sm secondaryLight">
<i class="fas fa-share-alt"></i>
</button>
<button class="btn-float btn-sm secondaryLight">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</footer>
</article>
Media Card (Vertical)
By default, every card is vertical card.
Sunset
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore asperiores quibusdam impedit
<article class="card">
<header class="card-header" tabindex="0">
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&
ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1203&q=80"
alt="Photo_by_SimonBerger"
class="img-responsive"
/>
</div>
<div class="card-details">
<h4 class="h4">Sunset</h4>
</div>
<p class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
inventore asperiores quibusdam impedit
</p>
</header>
<footer class="card-actions">
<div class="card-buttongroup">
<button class="btn btn-contained btn-sm secondary">
Share
</button>
</div>
</footer>
</article>
Media Card (Horizontal)
Choose a vertical image for this card to keep the aspect ratio.
<article class="card card-horizontal">
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1592743263126-bb241ee76ac7?ixlib=rb-1.2.1&
ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80"
alt="Photo_bt_MaksymKaharlytskyi"
class="img-responsive"
/>
</div>
<div class="content">
<header class="card-header" tabindex="0">
<div class="card-details">
<h4 class="card-title h4">Example Title</h4>
</div>
<p class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fuga inventore asperiores quibusdam impedit
</p>
</header>
<footer class="card-actions">
<div class="card-buttongroup">
<button class="btn-icon btn-sm secondaryLight">
<i class="far fa-heart"></i>
</button>
<button class="btn-icon btn-sm secondaryLight">
<i class="fas fa-share-alt"></i>
</button>
</div>
</footer>
</div>
</article>
Card with Shadow on Hover
All cards have shadow. If you want shadow on hover, use this card.
Glowy Sky
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, illum corrupti inventore labore sint blanditiis error eligendi debitis ipsum? Quia, officiis. Ea alias earum saepe totam placeat fugiat, architecto at?
<article class="card card-hover">
<header class="card-header" tabindex="0">
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1596203721435-47040fbf51a1?ixlib=rb-1.2.1&
ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=835&q=80"
alt="Photo_by_JoshuaWoroniecki"
class="img-responsive"
/>
</div>
<div class="card-details">
<h4 class="h4"<Lorem Ipsum>/h4>
</div>
<p class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, illum corrupti inventore labore sint blanditiis
error eligendi debitis ipsum? Quia, officiis. Ea alias earum saepe totam placeat fugiat, architecto at?
</p>
</header>
</article>
Card with Dismiss Button
Snowy Day
Photo by Artem Astashov
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore asperiores quibusdam impedit
<article class="card card-dismiss">
<header class="card-header" tabindex="0">
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1600332298178-da28008ee22a?ixlib=rb-1.2.1&
ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="Photo_by_ArtemAstashov"
class="img-responsive"
/>
</div>
<div class="card-details">
<!-- Add the title inside a container for using this layout -->
<div>
<h4 class="h4">Snowy Day</h4>
<h6 class="h6">Photo by Artem Astashov</h6>
</div>
<button class="card-dismiss-button">
<i class="fas fa-times"></i>
</button>
</div>
<p class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
inventore asperiores quibusdam impedit
</p>
</header>
<footer class="card-actions">
<div class="card-buttongroup">
<button class="btn btn-contained primaryLight btn-sm">
Share
</button>
</div>
</footer>
</article>
Card with Text Overlay (Hover)
Hover on the card to see the overlay.
Mühlebach VS, Switzerland
Photo by Joao Branco
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore asperiores quibusdam impedit
<article class="card card-dismiss card-overlay">
<header class="card-header" tabindex="0">
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1488543882437-49f6f714ad05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80"
alt="Photo_by_JoaoBranco"
class="img-responsive"
/>
</div>
<div class="card-details">
<!-- Add the title inside a container for using this layout -->
<div>
<h4 class="h4">Mühlebach VS, Switzerland</h4>
<h6 class="h6">Photo by Joao Branco</h6>
</div>
<button class="card-dismiss-button">
<i class="fas fa-times"></i>
</button>
</div>
<p class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
inventore asperiores quibusdam impedit
</p>
</header>
<footer class="card-actions">
<div class="card-buttongroup">
<button class="btn btn-contained primaryLight btn-sm">
Share
</button>
</div>
</footer>
<!-- Add this to get the overlay text, at the end of the card content -->
<div class="overlay">
<p class="overlay-text">Tour Unavailable</p>
</div>
</article>
Card with Text Overlay (Static)
Replcae the card-overlay class with card-overlay-static
Mühlebach VS, Switzerland
Photo by Joao Branco
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore asperiores quibusdam impedit
Card with Badge
Example of an ecommerce product card with badge.
Boat Earphones
Black Colour, On the Ear
₹1,799
₹2,199
18% off
Limited Offer
<article class="card" tabindex="0">
<header class="card-header">
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1599669454699-248893623440?ixlib=rb-1.2.1&
ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="Photo_by_JasonLeung"
class="img-responsive"
/>
</div>
<div class="card-details flex-row flex-space-between flex-center-y">
<h5 class="h5">Boat Earphones</h5>
<p class="single-star-rating">4.5</p>
</div>
<p class="card-content">Black Colour, On the Ear</p>
<figure class="price-container flex-row flex-center-y">
<p class="price">₹1,799</p>
<p class="secondary-text text-strike">₹2,199</p>
<p class="success-text">18% off</p>
</figure>
</header>
<!-- Add this to get the Badge on Card -->
<p class="text-badge primary">Limited Offer</p>
</article>
Notification Card
Used to show notification.
Sarah Jones followed you back!
<article class="card notification-card" tabindex="0">
<header class="card-header">
<article class="badge">
<figure class="avatar avatar-sm square">
<img
class="avatar-img"
src="https://teachingandlearning.schulich.yorku.ca/wp-content/uploads/2019/10/avatar6.png"
alt="demo_image"
/>
</figure>
<span class="online"></span>
</article>
<div class="notification">
<p class="notification-message">
<strong>Sarah Jones</strong> followed you back! 🔥
</p>
<span class="social-info">2h ago</span>
<span class="social-info seperator">Vibes Social Media</span>
</div>
</header>
</article>
Chips
Chips are compact elements that represent an attribute, or action.
Base Class - chip
Basic Chips
Supports all colour classes.
React
Angular
Stacked Chips
Takes full width of the container.
Additional Class - stacked
Warning
Success Light
Chips with Cancel Icon
Class provides the icon.
Additional Class - chip-cancel
Cancel
Javascript
<!-- Basic Chip -->
<p class="chip danger">Angular</p>
<!-- Stacked Chip -->
<span class="chip stacked warning">Warning</span>
<!-- Chip with cancel icon -->
<p class="chip chip-cancel secondary">Javascript</p>
Grids
You can use mix and match the classes as per your layout. For small screens - All the classes will have 1 column. For Medium Screen - All classes will have max 2 columns. For Large screens - All classes will have maximum of 3 columns. For XL screen column 4,5 and 6 classes will work. For Demo - view the grids in different screens.
Base Class - grid
Column
You can put min 1 and max 6 items in a column
Additional Classes - grid-c-1 ,grid-c-2 ,grid-c-3 ,grid-c-4 ,grid-c-5, grid-c-6
Classes applied for this demo are - grid, grid-c-6, gap-lg
Classes applied for this are - grid, grid-c-5, gap-md
Classes applied for this are - grid, grid-c-4, gap-sm
Row
You can put min 1 and max 6 items in a row.
Additional Classes - grid-r-1 ,grid-r-2 ,grid-r-3 ,grid-r-4 ,grid-r-5, grid-r-6
Grid gap
Deifines the space between rows and columns.
Additional Classes - gap-sm(0.5rem) ,gap-md (1rem) ,gap-lg(1.5rem)
Images
Images are one of the important part of web.
Responsive Image
Responsive Image will take full height and width of the parent container.
Class: img-responsive
Round Image
Available in default dimension of 10rem x 10rem.
Class: img-round
<!-- Responsive Image -->
<div>
<img src=".." alt=".." class="img-responsive">
</div>
<!-- Round Image -->
<img src=".." alt=".." class="img-round">
Inputs
Form Inputs let users enter and edit data.
Classes - input-group, input-group__label, input-group__input, input-group__focus-border
Input type - text, number, textarea, dropdown
<div class="input-group">
<label class="input-group__label">Text Input</label>
<input
type="text"
class="input-group__input"
placeholder="Enter text!"
/>
<span class="input-group__focus-border"></span>
</div>
<div class="input-group">
<label class="input-group__label">Input type number</label>
<input
type="number"
class="input-group__input"
placeholder="Enter number!"
/>
<span class="input-group__focus-border"></span>
</div>
<div class="input-group">
<label class="input-group__label">Input Type Textarea</label>
<textarea
class="input-group__input"
placeholder="Enter a long text!"
rows="2"
></textarea>
<span class="input-group__focus-border"></span>
</div>
<div class="input-group">
<label class="input-group__label">Gender</label>
<select class="input-group__input">
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
<span class="input-group__focus-border"></span>
</div>
<div class="input-group disabled">
<label class="input-group__label">Text Input Disabled</label>
<input
type="text"
class="input-group__input"
placeholder="Disabled!"
disabled
/>
<span class="input-group__focus-border"></span>
</div>
<div class="input-group required">
<label class="input-group__label">Text Input</label>
<input
type="text"
class="input-group__input"
placeholder="Enter text!"
required
/>
<span class="input-group__focus-border"></span>
</div>
Checkboxes and Radio
<div class="input-group--check">
<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<label for="checkbox-1">Checkbox</label>
</div>
<div class="input-group--check">
<input type="radio" name="radio-1" id="radio-1"/>
<label for="radio-1">Radio</label>
</div>
Search Bar
<div class="search-box">
<i class="fas fa-search search-icon"></i>
<input
type="search"
name="search"
id="search"
class="search-box__bar"
placeholder="Search for products"
/>
<span class="search-box__focus-border"></span>
</div>
Slider
<input type="range" min="1" max="100" value="50" class="slider" />
Lists
Lists are continuous, vertical indexes of text or images.
Nested Ordered Lists
Supprts 2 levels of nesting.
Class : nested-list
- Apple
- Mango
-
Vegetables
- Tomato
- Potato
- Grape
<ol class="nested-list">
<li>Apple</li>
<li>
Vegetables
<ol>
<li>>omato</li>
</ol>
</li>
<li>Grape</li>
</ol>
Icon Unordered Lists
Supports Two icons and only 1 level of nesting.
Classes : check-list, heart-list
- Eggs
- Milk
- Bread
- Eggs
- Milk
- Bread
Spaced Lists
The child items take the space available.
Class : spaced-list
- Eggs
- Milk
- Bread
- Sugar
- Chocolate Powder
- Flour
- Wipped Cream
- Vanilla Extract
- Food Color
Stacked Notification Lists
Add desired component inside "li" element. For Example - Notification Card is used for this demo.
Class : stacked-list
-
Sarah Jones followed you back!
-
John Daniel liked your post!
<ul class="stacked-list">
<li>
<!-- Notification card or your custom element! -->
</li>
</ul>
Modal
Modal / Dialogs are used to show user some option or data which need immediate attention.
Simple Modal
Modal Title
<article class="modal">
<div class="modal-header">
<h5 class="h5">Modal Title</h5>
<button class="modal-close-button">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="modal-content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Itaque accusamus deleniti quo soluta, laudantium est eaque
</p>
</div>
</article>
Confirmation Modal
Modal Title
<article class="modal">
<div class="modal-header">
<h5 class="h5">Modal Title</h5>
<button class="modal-close-button">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="modal-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officiis facere obcaecati, commodi praesentium dolor
cupiditate? Provident temporibus atque eaque, odio enim
exercitationem earum...
</p>
</div>
<div class="modal-footer">
<button class="btn btn-contained btn-sm secondaryLight">
Cancel
</button>
<button class="btn btn-contained btn-sm secondary">
Accept
</button>
</div>
</article>
Modal with Overlay
Modal closes when you click on overlay and close button.
<div class="modal-overlay" id="demo-modal">
<article class="modal">
<div class="modal-header">
<h5 class="h5">Modal Title</h5>
<button class="modal-close-button">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="modal-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officiis facere obcaecati, commodi praesentium dolor
cupiditate? Provident temporibus atque eaque, odio enim
exercitationem earum...
</p>
</div>
<div class="modal-footer">
<button class="btn btn-contained btn-sm secondaryLight">
Cancel
</button>
<button class="btn btn-contained btn-sm secondary">
Accept
</button>
</div>
</article>
</div>
const modal = document.querySelector(".modal-overlay");
const openModalButton = document.getElementById('open-modal-button');
const closeButton = document.querySelector("#demo-modal .modal-close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
openModalButton.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
Rating
Allows the user to submit a rating of a product or experience.
Normal Rating
Use font awesome star icons to generate this star rating component.
Class : star-rating-container
<fieldset class="star-rating-container">
<input type="radio" name="star" id="star1" class="rating-radio" />
<label for="star1"></label>
<input type="radio" name="star" id="star2" class="rating-radio" />
<label for="star2"></label>
<input type="radio" name="star" id="star3" class="rating-radio" />
<label for="star3"></label>
<input type="radio" name="star" id="star4" class="rating-radio" />
<label for="star4"></label>
<input type="radio" name="star" id="star5" class="rating-radio" />
<label for="star5"></label>
</fieldset>
Average Rating
For this you don't need to add any icon. Just add the class and it will add the star.
Class : single-star-rating
<p class="single-star-rating">4.5</p>
Snackbar
Snackbar inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen and disappear within few seconds.
<article class="snackbar" id="demo-snackbar">
<p class="snackbar-text">Can't send photo. Retry in 5 seconds.</p>
<button class="snackbar-close-button">
<i class="fa-solid fa-xmark"></i>
</button>
</article>
const snackbar = document.getElementById("demo-snackbar");
document
.getElementById("open-snackbar-button")
.addEventListener("click", () => {
snackbar.classList.add("snackbar-show");
setTimeout(() => {
snackbar.classList.remove("snackbar-show");
}, 3000);
});