Style Guide

We use Client-First Naming Convention for our templates.
Client-First is a set of guidelines and strategies Created by Komalal websites.

Headings

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

Heading 1

All Heading H1

Heading Style H1

heading-style-h1

Heading 2

All Heading H2

Heading Style H2

heading-style-h2

Heading 3

All Heading H3

Heading Style H3

heading-style-h3

Heading 4

All Heading H4

Heading Style H4

heading-style-h4

Heading 5

All Heading H5

Heading Style H5

heading-style-h5

Heading 6

All Heading H6

Heading Style H6

heading-style-h6

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

Sample text is being used as a placeholder for real text that is normally present.

text-size-large

Sample text is being used as a placeholder for real text that is normally present on your website.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-tiny

Text Styles

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

Sample text is being used as a placeholder.

text-style-quote

Text Weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Text Alignments

text-align-left

text-align-center

text-align-right

Other HTML Tags

HTML tags define default text styles.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All paragraphs

All Links

All links

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All quotes

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Buttons

Button combo class system.

Button Text

button

Button Text

button

is-small

Button Text

button

is-large

Button Text

button

is-secondary

Button Text

button

is-text

Button Text

button

is-icon

Colors

Manage recurring text and background colors.

Text Colors

text-color-primary

text-color-secondary

text-color-alternate

Background Colors

background-color-primary

background-color-secondary

background-color-tertiary

background-color-alternate

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

icon-height-small

icon-height-medium

icon-height-large

Komal elements

Native Komal elements with Client-First classes applied.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

form_component

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Caption

text-rich-text

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

max-width-full

max-width-full-tablet

max-width-full-mobile-portrait

max-width-full-mobile-landscape

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-regular

max-width-small

max-width-xsmall

max-width-xxsmall

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper

main-wrapper

container-small

container-medium

container-large

padding-global

padding-section-small

padding-section-medium

padding-section-large

button-group

Margins

Defined and flexible core structure we can use on all or most pages.

Direction Classes

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Size Classes

‍

margin-0

margin-4

margin-8

margin-12

margin-16

margin-24

margin-32

margin-48

margin-64

margin-72

margin-80

margin-96

margin-128

Paddings

Defined and flexible core structure we can use on all or most pages.

Direction Classes

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right

Size Classes

padding-0

padding-4

padding-8

padding-12

padding-16

padding-24

padding-32

padding-48

padding-64

padding-72

padding-80

padding-96

padding-128

Spacers

Unified spacer system for the project.

spacer-4

spacer-8

spacer-12

spacer-16

spacer-24

spacer-32

spacer-48

spacer-64

spacer-72

spacer-80

spacer-96

spacer-128

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hide

This element is hidden

hide-tablet

hide-mobile-portrait

hide-mobile-landscape

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-auto

pointer-events-none

spacing-clean

align-center

z-index-1

z-index-2

aspect-ratio-square

aspect-ratio-portrait

aspect-ratio-landscape

aspect-ratio-widescreen