Typography
H1 Heading Text
H2 Heading Text
H3 Heading Text
H4 Heading Text
H5 Heading Text
H6 Heading text
.font-size–4xl
.font-size–3xl
.font-size–2xl (H1 size)
.font-size–xl (H2 size)
.font-size–l (H3 size)
.font-size–m (H4 size, body text, paragraphs)
.font-size–s
.font-size–xs
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Spacing
Buttons
Colors – for comparison/testing
–color-secondary-light
–color-secondary
–color-secondary-dark
–color-secondary-light
–color-secondary
–color-secondary-dark
–color-secondary-light
–color-secondary
–color-secondary-dark
Colors – New (in GP Customizer)
/* global classes */
.has-text-color-surface-050 /* lightest surface color, used for text on dark backgrounds */
.has-bg-color-surface-200 /* light gray for section backgrounds */
.has-bg-color-primary /* primary brand color backgrounds */
.has-bg-color-secondary /* secondary brand color backgrounds */
/* --color-surface-050 is body background color and used instead of white in most places */
/* --color-surface-800 is body text color and used instead of black in most places */
/* status color palette is for Fluent Form and WooCommerce messages like "message sent", "product out of stock", etc. */–color-surface-050
–color-surface-100
–color-surface-200
–color-surface-300
–color-surface-400
–color-surface-500
–color-surface-600
–color-surface-700
–color-surface-800
–color-surface-900
–color-surface-950
–color-primary-light
–color-primary
–color-primary-dark
–color-secondary-light
–color-secondary
–color-secondary-dark
–color-tertiary-light
–color-tertiary
–color-tertiary-200
–color-success
–color-success-trans-30
–color-warning
–color-warning-trans-30
–color-info
–color-info-trans-30
–color-danger
–color-danger-trans-30
NOTE: the following patterns are all unsynced. This means they can be inserted into pages, detached, and then have their text, images, and links modified to fit the page content. As long as each element inside retains proper class names, global styling will still work as intended.
Common Pattern: Section
/* classes used: */
.gbp-section /* Usually 100% width. Example bg color set here for contrast */
.gbp-section__inner /* Limits content width to GP container width setting */
.gbp-section__title
.gbp-section__tagline
.gbp-section__button-wrapper
.button--primary, .button--shadow, .button--padding-largeSection Headline Goes Here
Awesome tagline or introductory sentence goes here.
Common Pattern: Modal Opt-Ins
.gbp-modal-container
.gbp-modal__header-container
.gbp-modal__icon-close
.gbp-modal__body-container (holds Fluent Form)Common Pattern: Split-Layout
.gbp-layout--split /* paired here with .gbp-section__inner to limit width; can also be used full-width */
.gbp-layout--split__image-container
.gbp-layout--split__image /* image size is "cover", so if text container will be tall, sides of image sides will be cropped. Full-width split-layout recommended in that scenario. */
.gbp-layout--split__text-container
.gbp-card__title
.gbp-card__text
.primary--button
Default H3 Heading
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
- List Item 1
- List Item 2
- List Item 3
Common Patterns: Cards
This is the H3 headline
This card is used in “Our Services” sections, and on “Industries” page.
.gbp-card__body-container
.gbp-card__icon
.gbp-card__title
.gbp-card__text
This is the H3 headline
This card is used for “Related Posts” at bottom of the blog post template.
.gbp-card__image
.gbp-card__body-container
.gbp-card__title
.gbp-card__text