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

