GNS logo

Styles Cheatsheet

Colours & Boxes

Backgrounds

b-bg-dark
b-bg-medium
b-bg-light
b-bg-accent
b-bg-gradient
b-bg-light-trans
b-bg-extralight-trans
b-bg-dark-trans

Boxes

b-box
b-box-l
b-icon-box

Typography Colours

b-text-light
b-text-dark
b-text-accent
b-heading-light
b-heading-accent
b-bg-dark
b-bg-medium
b-bg-light
b-bg-accent
b-bg-gradient

b-box

with b-shadow

b-box-l

with b-shadow-alt
b-bg-dark-trans

Headings

This is a block of text, check it to see the text colour. 

b-heading-light

b-text-light

b-heading-accent

b-text-accent
b-bg-light-trans
b-text-dark
b-bg-extralight-trans

Buttons, Typography & Utility Classes

Buttons

b-button
b-button-outline
b-button-alt
b-button-light
b-button-light-outline
b-button-trans
b-button-underline

Typography

b-tagline
b-text-note
b-text-s
b-text-l
b-quote
b-heading-alt
b-text-uppercase

Icons

b-icon-s
b-icon-m
b-icon-l
b-icon-alt-s
b-icon-alt-m
b-icon-alt-l

Utility

b-shadow
b-shadow-alt
b-transition
b-rounded
b-not-rounded
b-hover-up
b-hover-grow

Typography

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Tagline text (b-tagline)
Lead Paragraph text (b-text-lead)
Note text (b-text-note)
Large Text
Small text (b-text-s)
Quote text (b-text-quote)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6  (b-text-upppercase)

Heading alt

This field is for validation purposes and should be left unchanged.
A super simple icon list element.
It has several list items you can easily edit.
Delete rows you don't need.
Duplicate existing rows to add more.
Change the icons per row.
Change the icon padding to adjust the left spacing.
"This is a testimonial about your services or product. Keep it short, readable and choose one that's relevant to the content around it."
Person's Name
Person's Title

Layout

Even CSS Grid Columns

b-grid-2
b-grid-2-nopadding
b-grid-3
b-grid-3-nopadding
b-grid-4
b-grid-5
b-grid-6

Other Grid layouts

b-grid-2-1
b-grid-1-2
b-grid-3-2
b-grid-2-3

Column widths

b-col-width-half
b-col-width-third
b-grid-2-np-left
b-grid-2-np-right

Grid 2

Grid 3

Grid 4

Grid 5

Grid 6

Grid 2-1

Grid 1-2

Grid 3-2

Grid 2-3

b-grid-nomargin

This is a div with b-grid-nomargin applied which is removing the 1.5 rem left and right margins

b-grid-2-nopadding

b-col-width-half

This div has 1.rem left padding on it to line it up with the interior content of the boxed columns above. The full width of the div is an exact match for the outside of boxed columns above :)

b-grid-3-nopadding

b-col-width-third

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Sizing and Spacing

Padding (top & bottom)

b-padding-xxs
b-padding-xs
b-padding-s
b-padding-m
b-padding-l
b-padding-xl
b-padding-xxl

Margin Top

b-margin-top-xxs
b-margin-top-xs
b-margin-top-s
b-margin-top-m
b-margin-top-l
b-margin-top-xl
b-margin-top-xxl

Margin Bottom

b-margin-bottom-xxs
b-margin-bottom-xs
b-margin-bottom-s
b-margin-bottom-m
b-margin-bottom-l
b-margin-bottom-xl
b-margin-bottom-xxl

Margin left

b-margin-left-xxs
b-margin-left-xs
b-margin-left-s
b-margin-left-m
b-margin-left-l
b-margin-left-xl

Margin Right

b-margin-right-xxs
b-margin-right-xs
b-margin-right-s
b-margin-right-m
b-margin-right-l
b-margin-right-xl
GNS Logo - horizontal
Contact Us
+64 3 479 9684

Head Office
1 Fairway Drive,
Avalon 5010
PO Box 30-368,
Lower Hutt 5040
New Zealand

© SlideNZ - EILD Project 2024
Made by GNS and Avoca Web Design
diamondthumbs-up