Pro Pattern Global Style reference

The New Patterns Library provides over 200 mid-fidelity wireframe patterns. With minimal block styles these patterns can be integrated into any existing design. Built to a standardised framework each Pattern attracts its styles from 3 places:

Theme Styles
Local Block Styles
Global Styles

Theme Styles

The Patterns will inherit the following styles from Theme:

All Font Families
Typography for Sections: H1, H2 and Paragraph.
Typography Colors except where it is positioned over a Dark Background

Local Block Styles

Local styles on the block are used in very limited scenarios.

Sections Background Images and their Text and Link Colors
Section Inner uses Global Max Width to set its Sizing > Max Width.

Global Styles

Global Styles are where the majority of Pattern Styles are defined.

We can group the Global Styles into various sets that define their main purpose. The property values shown here are the default pattern values which may be subject to change.

Buttons

There are two pre-defined Button Styles:

.gbp-button--primary

.gbp-button--primary {
    display: inline-flex;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid;
    background-color: #000000;
    color: #ffffff;
}
.gbp-button--primary:hover {
    background-color: #000000;
    color: #ffffff;
}

.gbp-button--secondary

.gbp-button--secondary {
    display: inline-flex;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid #000000;
    color: currentColor;
}
.gbp-button--secondary:hover {
    color: currentColor;
}

Sections

.gbp-section

.gbp-section {
    padding: 7rem 40px;
}
@media (max-width: 1024px) {
    .gbp-section {
        padding: 6rem 30px;
    }
}
@media (max-width: 767px) {
    .gbp-section {
        padding: 4rem 20px;
    }
}

.gbp-section__inner

.gbp-section__inner {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--gb-container-width);
    position: relative;
    z-index: 1
}

.gbp-section__headline

.gbp-section__headline {
    margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
    .gbp-section__headline {
        margin-bottom: 1.25rem;
    }
}

.gbp-section__text

.gbp-section__text {
    font-size: 1.125rem;
}

.gbp-section__tagline

.gbp-section__tagline {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

Cards

.gbp-card

.gbp-card {
    padding: 1.5rem;
}
@media (max-width: 767px) {
    .gbp-card {
        padding: 1.25rem;
    }
}

.gbp-card__title

.gbp-card__title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.gbp-card__text

.gbp-card__text {
    font-size: 1rem;
    margin-bottom: 0px;
}

.gbp-card__meta-text

.gbp-card__meta-text {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.gbp-card--border

.gbp-card--border {
    border: 1px solid #000000;
}

Footer

.gbp-footer

.gbp-footer {
    font-size: 0.875rem;
    padding: 5rem 40px
}

.gbp-footer a {
    font-size: 0.875rem
}

@media (max-width:1024px) {
    .gbp-footer {
        padding: 4rem 30px
    }
}

@media (max-width:767px) {
    .gbp-footer {
        padding: 3rem 20px
    }
}

.gbp-footer__title

.gbp-footer__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem
}

.gbp-footer__link

.gbp-footer__link {
    display: block;
    padding-bottom: 0.375rem;
    padding-top: 0.375rem
}

Overlay Standard ( Pop Up )

.gbp-overlay-panel

.gbp-overlay-panel {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06),0 8px 16px rgba(0,0,0,0.1)
}

.gbp-overlay-panel__close

.gbp-overlay-panel__close {
    align-items: center;
    background-color: var(--base-3);
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-left-style: solid;
    border-left-width: 0px;
    border-right-style: solid;
    border-right-width: 0px;
    border-top-style: solid;
    border-top-width: 0px;
    color: #000000;
    column-gap: 0.5em;
    display: inline-flex;
    padding: 8px
}

.gbp-overlay-panel__close:is(:hover,:focus) {
    background-color: #000000;
    color: #ffffff
}

.gbp-overlay-panel__close .gb-shape svg {
    width: 16px;
    height: 16px;
    fill: currentColor
}

Visual Pattern Index

// Buttons

1  .gbp-button--primary
2  .gbp-button--secondary

// Sections

3  .gbp-section
4  .gbp-section__inner
5  .gbp-section__tagline
6  .gbp-section__headline
7  .gbp-section__text

// Cards

8  .gbp-card
9  .gbp-card__title
10 .gbp-card__text
11 .gbp-card__meta-text
12 .gbp-card--border

// Footers

13. .gbp-footer
14.  .gbp-footer__title
15. .gbp-footer__link

// Overlay Standard ( Pop Up )

16. .gbp-overlay-panel
17.  .gbp-overlay-panel__close