Getting Started
For integrating via CDN -
Just add below link in your html file.
1
<link rel="stylesheet" href="https://seasoning-ui.netlify.app/seasoning.css">2
For integrating via locally downloaded file -
Simply click the download button and paste the file in your css directory.
Layout Primitives
col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-2
col-2
col-2
col-2
col-2
col-2
col-1
col-2
col-5
col-3
col-1
xxxxxxxxxx13
1
<div class="col-12 layout-primitives__block">col-12</div>2
<div class="col-11 layout-primitives__block">col-11</div>3
<div class="col-10 layout-primitives__block">col-10</div>4
<div class="col-9 layout-primitives__block">col-9</div>5
<div class="col-8 layout-primitives__block">col-8</div>6
<div class="col-7 layout-primitives__block">col-7</div>7
<div class="col-6 layout-primitives__block">col-6</div>8
<div class="col-5 layout-primitives__block">col-5</div>9
<div class="col-4 layout-primitives__block">col-4</div>10
<div class="col-3 layout-primitives__block">col-3</div>11
<div class="col-2 layout-primitives__block">col-2</div>Typography
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic, nisi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, rerum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, provident.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore, quasi.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, aliquam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, maxime!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, facere.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, corporis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, repudiandae.
Colors
#B91C1C
#1F2937
#FBBF24
#3B82F6
#1E3A8A
#21ba45
#065F46
#a333c8
#6435c9
#EC4899
#9D174D
#E0E7FF
#BFDBFE
#D1FAE5
#b5cc18
#00b5ad
#e0e1e2
#1070ca17
#f8f9fa
#F5F3FF
Images
xxxxxxxxxx8
1
<div class="row col-4 col-lg-5 col-md-6 col-sm-12">2
<img src="./assets/avatar-5.png" class="image" alt="">3
</div>4
5
<div class="row col-4 col-lg-5 col-md-6 col-sm-12">6
<img src="./assets/avatar-5.png" class="image image--round" alt="">7
</div>8
Button
Simple Button
xxxxxxxxxx2
1
<button class="btn">Submit</button>2
Emphasized Buttons
A button can be formatted to show different levels of emphasis
xxxxxxxxxx13
1
<button class="btn btn--primary">Primary</button>2
<button class="btn btn--secondary">Secondary</button>3
<button class="btn btn--success">success</button>4
<button class="btn btn--warning">warning</button>5
<button class="btn btn--light">light</button>6
<button class="btn btn--red">red</button>7
<button class="btn btn--darkBlue">darkBlue</button>8
<button class="btn btn--darkGreen">darkGreen</button>9
<button class="btn btn--purple">purple</button>10
<button class="btn btn--violet">violet</button>11
<button class="btn btn--pink">pink</button>Icon Button
A button can also have an icon
xxxxxxxxxx16
1
<button class="btn btn__icon">2
<i class="fa fa-heart" aria-hidden="true"></i>3
</button>4
5
<button class="btn btn__icon btn--primary">6
<i class="fa fa-motorcycle" aria-hidden="true"></i>7
</button>8
9
<button class="btn btn__icon btn--purple">10
<i class="fa fa-mountain" aria-hidden="true"></i>11
</button>Outline Buttons
These buttons are less pronounced
xxxxxxxxxx14
1
<button class="btn btn--outline">Outline</button>2
<button class="btn btn--outline btn--primary">Primary And outline</button>3
<button class="btn btn--outline btn--secondary">Secondary And outline</button>4
<button class="btn btn--outline btn--success">success And outline</button>5
<button class="btn btn--outline btn--warning">warning And outline</button>6
<button class="btn btn--outline btn--light">light And outline</button>7
<button class="btn btn--outline btn--red">red And outline</button>8
<button class="btn btn--outline btn--darkBlue">darkBlue And outline</button>9
<button class="btn btn--outline btn--darkGreen">darkGreen And outline</button>10
<button class="btn btn--outline btn--purple">purple And outline</button>11
<button class="btn btn--outline btn--violet">violet And outline</button>Inverted Buttons
xxxxxxxxxx13
1
<button class="btn btn--inverted">Inverted</button>2
<button class="btn btn--inverted btn--primary">Inverted and primary</button>3
<button class="btn btn--inverted btn--secondary">Inverted and secondary</button>4
<button class="btn btn--inverted btn--success">Inverted and success</button>5
<button class="btn btn--inverted btn--warning">Inverted and warning</button>6
<button class="btn btn--inverted btn--light">Inverted and light</button>7
<button class="btn btn--inverted btn--red">Inverted and red</button>8
<button class="btn btn--inverted btn--darkBlue">Inverted and darkBlue</button>9
<button class="btn btn--inverted btn--darkGreen">Inverted and darkGreen</button>10
<button class="btn btn--inverted btn--violet">Inverted and violet</button>11
<button class="btn btn--inverted btn--pink">Inverted and pink</button>Inverted and outline Buttons
xxxxxxxxxx13
1
<button class="btn btn--inverted btn--outline">Inverted and outline</button>2
<button class="btn btn--inverted btn--primary btn--outline">Inverted, outline and primary</button>3
<button class="btn btn--inverted btn--secondary btn--outline">Inverted, outline and secondary</button>4
<button class="btn btn--inverted btn--success btn--outline">Inverted, outline and success</button>5
<button class="btn btn--inverted btn--warning btn--outline">Inverted, outline and warning</button>6
<button class="btn btn--inverted btn--light btn--outline">Inverted, outline and light</button>7
<button class="btn btn--inverted btn--red btn--outline">Inverted, outline and red</button>8
<button class="btn btn--inverted btn--darkBlue btn--outline">Inverted, outline and darkBlue</button>9
<button class="btn btn--inverted btn--darkGreen btn--outline">Inverted, outline and darkGreen</button>10
<button class="btn btn--inverted btn--violet btn--outline">Inverted, outline and violet</button>11
<button class="btn btn--inverted btn--pink btn--outline">Inverted, outline and pink</button>Badge and Pill
Badges
Badges as status
xxxxxxxxxx28
1
<div class="col-2 col-md-3 col-sm-4">2
<div class="badge__container badge-image-eg">3
<img class="image image--round" src="./assets/avatar-4.png" alt="">4
<span class="badge badge--sm badge--round bg-green"></span>5
</div>6
</div>7
8
<div class="col-2 col-md-3 col-sm-4">9
<div class="badge__container badge-image-eg">10
<img class="image image--round" src="./assets/avatar-4.png" alt="">11
<span class="badge badge--sm badge--round bg-red"></span>Badges to display count
xxxxxxxxxx28
1
<div class="col-2 col-md-3 col-sm-4">2
<div class="badge__container badge-icon-eg">3
<i class="far fa-envelope text-red"></i>4
<span class="badge badge--md badge--round bg-red text-white">3</span>5
</div>6
</div>7
8
<div class="col-2 col-md-3 col-sm-4">9
<div class="badge__container badge-icon-eg">10
<i class="fas fa-comments text-blue"></i>11
<span class="badge badge--md badge--round bg-dark-blue text-white">5</span>Example of using badge on an ecommmerce card
Out of stock
Iphone X
Rs 380
Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .
xxxxxxxxxx15
1
<div class="col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">2
<div class="card">3
<div class="card__img badge__container">4
<img src="./assets/product.jpg" alt="">5
<span class="badge bg-blue text-white" style="padding: 0.5em;">Out of stock</span>6
</div>7
<div class="card__body">8
<p class="card__meta">Apple</p>9
<p class="card__title">Iphone X</p>10
<p class="card__lead">Rs 380</p>11
<p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .</p>Pills
Small sized pills
Small pill Small pill Small pill Small pill Small pill Small pill Small pill Small pill Small pill Small pill Small pillxxxxxxxxxx12
1
<span class="pill bg-blue text-white">Small pill</span>2
<span class="pill bg-yellow text-white">Small pill</span>3
<span class="pill bg-pink text-white">Small pill</span>4
<span class="pill bg-green text-white">Small pill</span>5
<span class="pill bg-red text-white">Small pill</span>6
<span class="pill bg-violet text-white">Small pill</span>7
<span class="pill bg-dark-blue text-white">Small pill</span>8
<span class="pill bg-black text-white">Small pill</span>9
<span class="pill bg-dark-green text-white">Small pill</span>10
<span class="pill bg-light-green text-black">Small pill</span>11
<span class="pill bg-purple text-white">Small pill</span>Medium sized pills
Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pillxxxxxxxxxx12
1
<span class="pill pill-md bg-blue text-white">Medium pill</span>2
<span class="pill pill-md bg-pink text-white">Medium pill</span>3
<span class="pill pill-md bg-green text-white">Medium pill</span>4
<span class="pill pill-md bg-yellow text-white">Medium pill</span>5
<span class="pill pill-md bg-red text-white">Medium pill</span>6
<span class="pill pill-md bg-violet text-white">Medium pill</span>7
<span class="pill pill-md bg-dark-blue text-white">Medium pill</span>8
<span class="pill pill-md bg-black text-white">Medium pill</span>9
<span class="pill pill-md bg-dark-green text-white">Medium pill</span> 10
<span class="pill pill-md bg-light-green text-black">Medium pill</span>11
<span class="pill pill-md bg-purple text-white">Medium pill</span>Large sized pills
Large pill Large pill Large pill Large pill Large pill Large pill Large pill Large pill Large pill Large pill Large pillxxxxxxxxxx12
1
<span class="pill pill-lg bg-blue text-white">Large pill</span>2
<span class="pill pill-lg bg-yellow text-white">Large pill</span>3
<span class="pill pill-lg bg-pink text-white">Large pill</span>4
<span class="pill pill-lg bg-green text-white">Large pill</span>5
<span class="pill pill-lg bg-red text-white">Large pill</span>6
<span class="pill pill-lg bg-violet text-white">Large pill</span>7
<span class="pill pill-lg bg-dark-blue text-white">Large pill</span>8
<span class="pill pill-lg bg-black text-white">Large pill</span>9
<span class="pill pill-lg bg-dark-green text-white">Large pill</span>10
<span class="pill pill-lg bg-light-green text-black">Large pill</span>11
<span class="pill pill-lg bg-purple text-white">Large pill</span>Avatar
Text Input
Standard Input
xxxxxxxxxx4
1
<div class="input">2
<input type="text" placeholder="Enter text">3
</div> 4
Interacting Input
An input field can show a user is currently interacting with it
xxxxxxxxxx4
1
<div class="input focus">2
<input type="text" placeholder="Enter text">3
</div> 4
Disabled
An input field can show that it is disabled
xxxxxxxxxx8
1
<div class="input disabled">2
<input type="text" placeholder="Enter text" tabindex="-1">3
</div>4
<div class="input input--icon disabled">5
<input type="text" placeholder="Enter text" tabindex="-1">6
<i class="fa fa-search"></i>7
</div>8
Error
An input field can show a user if some validation error is present.
xxxxxxxxxx4
1
<div class="input error">2
<input type="text" placeholder="Enter text">3
</div> 4
Icon
An input can be formatted with an icon
xxxxxxxxxx9
1
<div class="input input--icon">2
<input type="text" placeholder="Enter text">3
<i class="fa fa-search"></i>4
</div>5
<div class="input input--icon">6
<i class="fa fa-search"></i>7
<input type="text" placeholder="Enter text">8
</div>9
Labeled
An input can be formatted with a label
http://
.com
kg
http://
.com
xxxxxxxxxx21
1
<div class="input input--label">2
<div class="input__label input__label--prepend">http://</div>3
<input type="text" placeholder="Enter text">4
</div>5
<div class="input input--label">6
<input type="text" placeholder="Enter text">7
<div class="input__label input__label--append">.com</div>8
</div>9
<div class="input input--label error">10
<input type="text" placeholder="Enter text">11
<div class="input__label input__label--append">kg</div>Transparent
A transparent input has no background
http://
.com
http://
.com
xxxxxxxxxx20
1
<div class="input input--transparent">2
<input type="text" placeholder="Search">3
</div>4
<div class="input input--label input--transparent">5
<div class="input__label input__label--prepend input__label--basic">http://</div>6
<input type="text" placeholder="Enter text">7
</div>8
<div class="input input--label input--transparent">9
<input type="text" placeholder="Enter text">10
<div class="input__label input__label--append input__label--basic">.com</div>11
</div>Inverted
An input can be formatted to appear on dark backgrounds
.com
http://
.com
http://
.com
x
1
<div class="input">2
<input type="text" placeholder="Search">3
</div>4
5
<div class="input input--label">6
<input type="text" placeholder="Enter text">7
<div class="input__label input__label--append">.com</div>8
</div>9
10
<div class="input input--label input--inverted">11
<div class="input__label input__label--prepend input__label--basic">http://</div>Fluid
An input can take the size of its container
xxxxxxxxxx9
1
<div class="input input--fluid">2
<input type="text" placeholder="Enter text">3
</div>4
5
<div class="input input--fluid input--icon">6
<i class="fa fa-search"></i>7
<input type="text" placeholder="Enter text">8
</div>9
Size
An input can vary in size
xxxxxxxxxx19
1
<div class="input input--small input--icon">2
<i class="fa fa-search"></i>3
<input type="text" placeholder="Enter text">4
</div>5
6
<br><br>7
8
<div class="input input--medium input--icon">9
<i class="fa fa-search"></i>10
<input type="text" placeholder="Enter text">11
</div>Text Area
File Picker
Search Input
Select
xxxxxxxxxx31
1
<div class="custom-dropdown">2
<select class="custom-dropdown__menu">3
<option value="">Something 1</option>4
<option value="">Something 2</option>5
<option value="">Something 3</option>6
<option value="">Something 4</option>7
<option value="">Something 5</option>8
</select>9
</div>10
11
<div class="custom-dropdown custom-dropdown--medium">Checkbox
Radio
Rating
xxxxxxxxxx34
1
<div class="rating__container rating--heart">2
<label class="rating__control" for="rating1"></label>3
<input class="rating__input" type="radio" name="rating" id="rating1">4
5
<label class="rating__control" for="rating2"></label> 6
<input class="rating__input" type="radio" name="rating" id="rating2">7
8
<label class="rating__control" for="rating3"></label>9
<input class="rating__input" type="radio" name="rating" id="rating3">10
11
<label class="rating__control" for="rating4"></label>Medium Sized Ratings
xxxxxxxxxx34
1
<div class="rating__container rating--heart rating--md">2
<label class="rating__control" for="rating-md-1"></label>3
<input class="rating__input" type="radio" name="rating" id="rating-md-1">4
5
<label class="rating__control" for="rating-md-2"></label> 6
<input class="rating__input" type="radio" name="rating" id="rating-md-2">7
8
<label class="rating__control" for="rating-md-3"></label>9
<input class="rating__input" type="radio" name="rating" id="rating-md-3">10
11
<label class="rating__control" for="rating-md-4"></label>large Sized Ratings
xxxxxxxxxx34
1
<div class="rating__container rating--heart rating--lg">2
<label class="rating__control" for="rating1"></label>3
<input class="rating__input" type="radio" name="rating" id="rating1">4
5
<label class="rating__control" for="rating2"></label> 6
<input class="rating__input" type="radio" name="rating" id="rating2">7
8
<label class="rating__control" for="rating3"></label>9
<input class="rating__input" type="radio" name="rating" id="rating3">10
11
<label class="rating__control" for="rating4"></label>Switch
Toaster
Alert
Hey! Your Tansaction has been Successfully Made!
Hey! Your Tansaction has failed. Please try again!
Hey! Some warning is there. Please review it and do the needful!
Just a notification message
Another notification without icon
Just a notification message
A notification without icon
xxxxxxxxxx28
1
<div class="col-4 col-lg-6 col-md-12 alert bg-green text-light-green">2
<i class="fa fa-check" aria-hidden="true"></i>3
<p>Hey! Your Tansaction has been Successfully Made!</p>4
</div>5
<div class="col-4 col-lg-6 col-md-12 alert bg-red text-white">6
<i class="fa fa-times" aria-hidden="true"></i>7
<p>Hey! Your Tansaction has failed. Please try again!</p>8
</div>9
<div class="col-4 col-lg-6 col-md-12 alert bg-yellow text-white">10
<i class="fa fa-exclamation" aria-hidden="true"></i>11
<p>Hey! Some warning is there. Please review it and do the needful!</p>xxxxxxxxxx13
1
<div class="col-4 col-lg-6 col-md-12 alert-message bg-green text-light-green">2
<i class="fa fa-check" aria-hidden="true"></i>3
<p>Hey! Your Tansaction has been Successfully Made!</p>4
</div>5
<div class="col-4 col-lg-6 col-md-12 alert-message bg-red text-white">6
<i class="fa fa-times" aria-hidden="true"></i>7
<p>Hey! Your Tansaction has failed unfortunately. Please try again!</p>8
</div>9
<div class="col-4 col-lg-6 col-md-12 alert-message bg-yellow text-white">10
<i class="fa fa-exclamation" aria-hidden="true"></i>11
<p>Hey! Some warning is there. Please review it and do the needful!</p>xxxxxxxxxx13
1
<div class="col-4 col-lg-6 col-md-12 alert alert-message bg-green text-light-green">2
<i class="fa fa-check" aria-hidden="true"></i>3
<p>Hey! Your Tansaction has been Successfully Made!</p>4
</div>5
<div class="col-4 col-lg-6 col-md-12 alert alert-message bg-red text-white">6
<i class="fa fa-times" aria-hidden="true"></i>7
<p>Hey! Your Tansaction has failed unfortunately. Please try again!</p>8
</div>9
<div class="col-4 col-lg-6 col-md-12 alert alert-message bg-yellow text-white">10
<i class="fa fa-exclamation" aria-hidden="true"></i>11
<p>Hey! Some warning is there. Please review it and do the needful!</p>Spinner
Popup
Popup Header
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, eaque.
Popup Header
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, eaque.
Popup Header
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, eaque.
Card
Simple card
Sarthak
Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .
xxxxxxxxxx16
1
<div class="card col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">2
<div class="card__body">3
<p class="card__title">Sarthak</p>4
<p class="card__meta">Joined in 2020</p>5
<p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .</p>6
</div>7
<div class="card__footer">8
<p>9
<span class="card__icon">10
<i class="fas fa-laptop-code"></i>11
</span>Social Media card
Sarthak
Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .
-
Women
- 3 comments
- 17 likes
xxxxxxxxxx61
1
<div class="col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">2
<div class="card">3
<div class="card__img">4
<img src="./assets/avatar1.png">5
</div>6
<div class="card__body">7
<p class="card__title">Sarthak</p>8
<p class="card__meta">Joined in 2020</p>9
<p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .</p>10
</div>11
<div class="card__footer">Notification Card / Action card
-
Elliot Fu
-
Elliot requested permission to view your contact details
-
Lionel Messi
-
Born and raised in central Argentina, Messi relocated to Spain to join Barcelona at age 13, for whom he made his competitive debut aged 17 in October 2004. He established himself as an integral player for the club within the next three years, and in his first uninterrupted season in 2008–09 he helped Barcelona achieve the first treble in Spanish football; that year, aged 22, Messi won his first Ballon d'Or. Three successful seasons followed, with Messi winning four consecutive Ballons d'Or, making him the first player to win the award four times and in a row
xxxxxxxxxx46
1
<div class="card col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12">2
<div class="card__header">3
<ul class="card__list spaceBetween">4
<li class="list__item">5
<p class="card__title">Elliot Fu</p>6
<p class="card__meta">Friends of Veronika</p>7
</li>8
<li class="list__item">9
<img src="./assets/avatar-4.png" class="avatar" alt="">10
</li>11
</ul>Ecommerce card
Iphone X
Rs 380
Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .
Goodnites Nighttime Bedwetting Underwear, Boys' S/M (43-68 lb.), 44 Ct
Rs 1992
xxxxxxxxxx45
1
<div class="col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">2
<div class="card">3
<div class="card__img">4
<img src="./assets/product.jpg" alt="">5
</div>6
<div class="card__body">7
<p class="card__meta">Apple</p>8
<p class="card__title">Iphone X</p>9
<p class="card__lead">Rs 380</p>10
<p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .</p>11
</div>Horizontal card
Jenny Hess
Jenny is a student studying Media Management at the New School.
xxxxxxxxxx17
1
<div class="col-5 col-xl-7 col-md-9 col-sm-12">2
<div class="card card--horizontal">3
<div class="card__img col-6 p-0 m-0">4
<img src="./assets/avatar-7.jpg" alt="">5
</div>6
<div class="card__content">7
<p class="card__title">Jenny Hess</p>8
<p class="card__description">Jenny is a student studying Media Management at the New School.</p>9
<button class="btn btn--purple btn--inverted btn--fluid"> 10
<i class="fa fa-plus"></i>11
Add Friend