Style Guide

All colors are available via Bootstrap classes. They work for both background and text.

Text Example: .text-[color]

Background Example: .bg-[color]

Read more here: Bootstrap Colors

If a new color is introduced in the future it must be brought to the project by a SASS variable ONLY so it can be available cross site.

Primary + Link
RED / #938677
Secondary
YELLOW / #ffb600
Dark Grey
dark / #313234
Light Grey
light / #f3f3f3

Main font family is the 'Gordita' font. It's already set-up and available in the following variants:

  • Normal (default font)
  • Normal Italic (use '.font-italic' class)
  • Medium (500) (use '.font-weight-medium' class)
  • Medium Italic (use '.font-weight-medium-italic' class)
  • Semibold (600) (use '.font-weight-semibold' class)
  • Semibold Italic (use '.font-weight-semibold-italic' class)
  • Bold (700) (use '.font-weight-bold' class)
  • Bold Italic (use '.font-weight-bold-italic' class)
  • Font Family: Barlow (font-family-base)
  • Font Family: Work Sans (font-family-Work Sans)
  • Font Family: Frank Ruhl Libre (font-family-heading)

All fonts are responsive by using Bootstrap's built-in responsive font sizes functionality.

Don't create custom media queries for font-sizes without any need.

Basic headings

h1. heading (50px)

h2. heading (38px)

h3. heading (30px)

h4. heading (28px)

h5. heading (20px)
h6. heading (17px)

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3 (54px)

Display 4 (25px)

Styled headings

Uses the '.fancy-heading' class in any H1-H6 heading.

Fancy Heading

Fancy Heading Centered

Lead

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Font weight and italics

Quickly change the weight (boldness) of text or italicize text.

Bold text.

medium text.

semibold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

All button classes (size, color, variant, border radius) can be mixed and matched.

Basic Button Link

Shop Now

shop Now

Paragraph Text Link

Primary Link

Basic button styles

Button sizes

Button states

Active State

Button border radius variants

Button group

Text Field
Text Field + Icon
Text Area
States
Checkboxes
Switches
Radios
Badges
MOST POPULAR
New This Month
Members Only
Low Stock
VMP Exclusive Pressing 42% OFF
Pagination
Basic Select

All selects and dropdowns can be modified with Bootstrap color and size classes.

Basic Dropdown
Colors

All theme colors are available.

Floating Dropdown
Enhanced Selects

Project has specific needs for more enhanced selects that can't be covered from Bootstrap out of the box. We are using a specific plugin called 'Bootstrap Select' to bring enhanced dropdowns to the project. Dropdowns with support of icons, multiselect and search capabilities.

These selects accept all Bootstrap button size and color classes via the data-style attribute.

Full list of other options.

With option groups
With search
With icons

You can bring icons into the select options via the data-icon attribute.

Project already imports all icons from the Ionicons family. These icons have two variants, one Android style and one iOS style (thinner).

Additionally client provided the following custom icons. These icons are embedded into the project via the Icomoon service.

Custom Icons

icon-servicio-Integral
icon-beneficios-comerciales
icon-garantias
icon-uparrow_kc
icon-downarrow_kc
icon-customer-7
icon-customer-6
icon-customer-5
icon-customer-4
icon-customer-3
icon-customer-2
icon-customer-1
icon-comment
icon-benefit2_kc
icon-benefit4_kc
icon-close_kc
icon-qty-add-cart
icon-qty-minus-cart
icon-clock
icon-comment
icon-rightarrowwhite_kc
icon-leftarrowwhite_kc
icon-benefit5_kc
icon-benefit3_kc
icon-benefit1_kc
icon-youtube_kc
icon-spotify_kc
icon-search_kc
icon-rightarrow_kc
icon-myaccount-filled_kc
icon-myaccount_kc
icon-leftarrow_kc
icon-instagram_kc
icon-facebook_kc
icon-cart-filled_kc
icon-cart_kc
icon-buttonarrow_kc
icon-twitter_kc
icon-pinterest_kc
Shadow 1 (.shadow-1)
Shadow 2 (.shadow-2)
Shadow 3 (.shadow-3)
Shadow 4 (.shadow-4)
Shadow 5 (.shadow-5)
Carrito de Compras
Quantity chosen for this item exceeds availabilty.
Quantity in your cart has been adjusted.

Tu carrito está vació

Continuar Comprando
TOP
Chat
x