Pattern Global Styles

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 3 sets:

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;
    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-section__text

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

.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;
}

Visual Pattern Index

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

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

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