Overview
Introduction
This is the Pattern Library for Project Bread.
Primary Logo
{{
svg.render({
name: 'logo-dark',
classes: 'o-icon--logo',
iconClasses: true,
alt: 'Project Bread's Logo'
})
}}
Primary Logo Light
{{
svg.render({
name: 'logo-light',
classes: 'o-icon--logo-footer',
iconClasses: true,
alt: 'Project Bread's Logo'
})
}}
Colors
X-Large
x-large
Large
Large, Light
Large - Dark
Large, Dark
Medium
Medium, Light
Medium - Dark
Medium, Dark
Small
Small
Subtitle
Subtitle, Light
Subtitle - Dark
Subtitle, Dark
Large Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus feugiat ultrices. Integer sed velit porttitor, volutpat leo dignissim, malesuada sapien. Cras vel vestibulum orci, a gravida quam. Donec sit amet ante eu nulla tincidunt consequat.
Large Mono
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus feugiat ultrices. Integer sed velit porttitor, volutpat leo dignissim, malesuada sapien. Cras vel vestibulum orci, a gravida quam. Donec sit amet ante eu nulla tincidunt consequat.
Small Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus feugiat ultrices. Integer sed velit porttitor, volutpat leo dignissim, malesuada sapien. Cras vel vestibulum orci, a gravida quam. Donec sit amet ante eu nulla tincidunt consequat.
Small Mono
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus feugiat ultrices. Integer sed velit porttitor, volutpat leo dignissim, malesuada sapien. Cras vel vestibulum orci, a gravida quam. Donec sit amet ante eu nulla tincidunt consequat.
Link
{{
link.primary(
{
path: '',
linkText: '',
classes: ''
}
)
}}
Pagination
{{
pager.render(
{
page: 2,
total: 10,
shown: 3
},
'http://localhost:3000/styleguide'
)
}}
Headline Callout
Project Bread has transformed school meals at X locations.
Access the recipe index below for new recipes to try at home or in your school!
Project Bread has transformed school meals at X locations.
Access the recipe index below for new recipes to try at home or in your school!
{{
headlineCallout.render ({
headline: '',
body: '',
theme: ''
})
}}
CTA Callout
Project Bread has transformed school meals at X locations.
Access the recipe index below for new recipes to try at home or in your school!
Donate NowProject Bread has transformed school meals at X locations.
Access the recipe index below for new recipes to try at home or in your school!
Donate Now
Rich Text
Subtitle
Headline
Next Rich Text Widget
{{
richText.render({
headline: '',
subtitle: '',
body: '',
ctaStyle: '',
ctas: [
{
path: '',
linkText: ''
}
]
})
}}
Four Columns Block
Widget Headline
Lorem ipsum dolor sit amet, ubique ridens iracundia vis an, sit ut ullum noster impedit, sea ad. Eros eloquentiam eum no. Et mnesarchum adversarium suscipiantur mel, quas omnes audiam. Lorem ipsum dolor sit amet, ubique ridens iracundia vis an, sit ut ullum.
Executive
Business
CTA Blocks - Single
CTA Blocks - Pair
Impact CTA - Full Bleed
The walk
Headline about the Walk
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Donate
{{
cta.render({
headline: '',
subtitle: '',
description: '',
image: {
src: '',
alt: ''
},
cta: {
linkText: '',
path: ''
}
})
}}
Quote Block
“There is no reason why any child in the City of Boston should sit in a classroom with an empty stomach and suffer in silence.”
ERIN MCALEER, EXECUTIVE DIRECTOR, PROJECT BREAD.
“There is no reason why any child in the City of Boston should sit in a classroom with an empty stomach and suffer in silence.”
ERIN MCALEER, EXECUTIVE DIRECTOR, PROJECT BREAD.
{{
quoteBlock.render({
quote: '',
attribution: '',
theme: '',
image: {
src: '',
alt: '',
focalPoint: ''
}
})
}}
Stat Widget
OUR IMPACT
150,000 more children
have access to school breakfast in MA
{{
stat.render({
headline: '',
subtitle: '',
description: ''
})
}}
Single Image
Footer
{{
footer.render({
address: '',
phone: '',
fax: '',
email: '',
secondaryNav: [
{
linkText: '',
path: ''
},
...
]
})
}}
Hero - Primary
Impactful Headline Lorem
Lorem ipsum dolor sit amet, ubique ridens iracundia vis an, sit ut ullum noster impedit, sea ad quando decore.
