Main navigation
Click and edit any item below to see how the component looks with different text
Typography
We use Lato fontface in Regular(400), Light(300)
and
Bold(700) weights.
Lato includes only latin and latin extended characters. For other alphabets the
default sans
serif font
will be used.
Click and edit any text below to see how the component looks with different text
Headers
get settings wariable
H1 example text
H2 example text
H3 example text (always uppercased)
Paragraph
Saleor is open and free to use. It is not a bait to force you to pay us later and we promise to do our bests to fix bugs and improve the code. Some situations however call for a custom solution and extra code to be written. Whether you need us to cover an exotic use case or build you a custom e-commerce appliance, our team can help.
Links
Colors
#333333
$body-color
#ffffff
$white
#f2f2f2
$light-gray
#D3D1D0
$gray
#bab7b6
$darken-gray
#828282
$skull-gray
#26A5D4
$blue
#1e83a9
$darken-blue
#EB5757
$red
#c53636
$dark-red
#27AE60
$green
#FFFAEC
$beige
Grid
We use Bootstrap 5 responsive grid which is based on a 12 column layout. In most cases we use following combinations:
col-md-3 col-6
col-md-3 col-6
col-md-3 col-6
col-md-3 col-6
col-md-6
col-md-6
col-lg-10 m-auto
col-md-7
col-md-5
Responsive breakpoints
Max container width
Class prefix
Extra small
<576px
<576px
None (auto)
.col-
Small
≥576px
≥576px
540px
.col-sm
Medium
≥768px
≥768px
720px
.col-md
Large
≥992px
≥992px
960px
.col-lg
Extra large
≥1200px
≥1200px
1140px
.col-xl
Helper classes
Storefront templates built with Bootstrap 5 framework wich has handful utility classes:
Responsive floats
<div class="float-left">Float left on all viewport
sizes</div>
<div class="float-right">Float right on all viewport
sizes</div>
<div class="float-none">Don't float on all viewport
sizes</div>
<div class="float-sm-left">Float left on viewports sized
SM (small) or
wider</div>
<div class="float-md-right">Float right on viewports sized
MD (medium) or
wider</div>
Responsive utilities
The .hidden-*-up classes hide the element when the viewport is at the
given
breakpoint or
wider. For example, .hidden-md-up hides an element on medium, large, and
extra-large
viewports.
The .hidden-*-down classes hide the element when the viewport is at
the given
breakpoint or
smaller. For example, .hidden-md-down hides an element on extra-small, small,
and medium
viewports.
Icons
Forms
Text form
Filters
Box Size
Select
Number input
Radio buttons
Input groups
Variant picker
Errors
Errors are always displayed as a small red text below the form explaining what cause the error.
This field is required
Radio form
This field is required.
Quantity
Only 32 remaining in stock.
Pagination
Click and edit any item below to see how the component looks with different text
Notifications
Click and edit any item below to see how the component looks with different text
This is Success alert.
This is Danger alert.
This is Warning alert. Notifications content is not limited with
container width. Place here as many information as you want or need to.
Tabs navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor, felis et volutpat blandit, ex turpis consectetur eros, sit amet malesuada diam elit ut arcu.
Cras dapibus at turpis eget porta. Donec laoreet nulla nunc, ac euismod diam efficitur et. In hac habitasse platea dictumst. Donec eleifend pharetra est, ac molestie lorem lacinia a.
Nullam sit amet finibus tortor. Curabitur auctor malesuada dui, quis ornare libero posuere quis. Aliquam non faucibus erat, nec hendrerit ex.
Tables
Click and edit any text below to see how the component looks with different text
Cards
Click and edit any text below to see how the component looks with different text
Products
Click and edit any text below to see how the component looks with different text
Johnson-Brown
Johnson-Brown