JS Fiddle

Check out the JS Fiddle for the entire Kitchen Sink / Examples page
JSFiddle Example

Typography

Basket uses the Inter font designed by Rasmus Andersson and hosted by Google Fonts. We import it directly into our files so that you don't need to add another line of html or css in your code. Basket intends to be a simple drop-in solution.

Display

Display 1

Display 2

Display 3

Display 4

Headings

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Regular Text

Leading paragraph text

this is a normal paragraph text

Colors

We used different colour pallets based on if the site is in light mode vs dark mode.

Light Mode

Dark Mode

Blockquote

We have all the colours for blockquotes! Simple add an additional class with blockquote-* with * replacing any one of the color options.

<!-- Default blockquote without a left-border -->
<blockquote class="blockquote">
    Hello World
</blockquote>

<!-- Default blockquote witha a blue left-border -->
<blockquote class="blockquote blockquote-blue">
    Hello World
</blockquote>

<!-- Default blockquote witha a green left-border -->
<blockquote class="blockquote blockquote-green">
    Hello World
</blockquote>

Grid

Button

For larger buttons use btn-lg

For full width buttons use btn-block

Normal Buttons

Blue Green Indigio Orange Red Dark

Rounded Buttons

Blue Green Indigio Orange Red Dark

Disabled Buttons

Dark Dark

Other Buttons

Large

Block

Navbar

Form

Name Email Password Select Selection menu One Two Three Example range

Colourful range slider .slider-*

Here's a smaller slider using the .slider-small class.

Textarea Remember me Submit Form

Here is an example with .form-modern

Name Email Password Select Selection menu One Two Three Example range

Colourful range slider .slider-*

Textarea Remember me Submit Form

Tables

Tables are entirely "optional" just like Bootstrap, meaning you must apply the .table class in order for it to work, here is an example:

First Name	Last Name	Job Title
Omar	Quazi	Software Developer
John	Smith	Designer

Use the .table-striped class to created a striped table

First Name	Last Name	Job Title
Omar	Quazi	Software Developer
John	Smith	Designer

Here is a table without borders, in case you like that using the .table-borderless class! The .table-striped has been added to make it a little more readable.

First Name	Last Name	Job Title
Omar	Quazi	Software Developer
John	Smith	Designer

Here is another table, but with all of the cells bordered using the .table-bordered class!

First Name	Last Name	Job Title
Omar	Quazi	Software Developer
John	Smith	Designer

Of course, there are colour variants as well! Here is an indigo table using the .table-indigo class

First Name	Last Name	Job Title
Omar	Quazi	Software Developer
John	Smith	Designer

Lists

• One.
• Two.
• Three. Well, probably this list item should be longer. Note that for short items lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.
• Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.

This is a paragraph before a numbered list (ol). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can't guess which paragraphs are logically related to a list, e.g. as a "list header".

1. One.
2. Two.
3. Three. Well, probably this list item should be longer. Note that if items are short, lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.
4. Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.

Images

Responsive image (10000x1000):

Circular Avatar image:

Utils

Divider

---