Overview
Introduction
This is the Pattern Library for Mufson Howe Hunter.
Primary Logo
{{
svg.render({
name: 'logo',
classes: 'o-icon--logo',
iconClasses: true,
alt: 'Mufson Howe Hunter Logo'
})
}}
Primary Logo Light
{{
svg.render({
name: 'logo',
classes: 'o-icon--logo-footer',
iconClasses: true,
alt: 'Mufson Howe Hunter Logo'
})
}}
Colors
Gradients
Jumbo Header
Jumbo Header / Cardo, 90px / 100LH / -1.26 letterspacing
Large Header
Large Header / Cardo, 60px / 70LH / -.84 letterspacing
Small Header
Small Header / Cardo, 36px / 44LH /-.5 letterspacing
Smallest Header
Smallest Header / Cardo, 30px / 40LH
Subtitle
Subtitle / Cardo Bold, 13px / 15LH / 1.65 letterspacing
Intro Boody
Intro Body / Roboto Light, 24px / 48LH / .32 letterspacing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.
Large Body
Large Body / Roboto Light, 20px / 40LH / .27 letterspacing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.
Body
Body / Roboto Light, 18px / 30LH / .25 letterspacing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.
Small Body
Small Body / Roboto Light, 15px / 30 LH / .2 letterspacing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.
Pagination
{{
pager.render(
{
page: 2,
total: 10,
shown: 3
},
'http://localhost:3000/styleguide'
)
}}
Filters
See:
{{
filters.render({
categories: [
{
label: 'Business Service',
value: 'business'
},
{
label: 'Consumer Products',
value: 'consumer'
},
{
label: 'Technology',
value: 'tech'
},
{
label: 'Manufacturing',
value: 'manufacturing'
}
]
})
}}
Transactions
Has completed a majority recapitalization with
{{
transaction.single({
transactions: [
{
image: {
src: '/images/unified-doors-hardware.png',
alt: 'Image alt text'
},
description: 'Has completed a majority recapitalization with'
},
{
image: {
src: '/images/dunes-point.png',
alt: 'Image alt text'
},
description: null
}
]
})
}}
Call to Action
Call to action lorem ipsum
{{
cta.render({
headline: 'Call to action lorem ipsum',
supportingCopy: 'Supporting text lorem ipsum curabitur blandit tempus porttitor.',
button: {
path: '/custom/path',
linkText: Learn More
}
})
}}
50/50 Image and Text
Featured Case Study
Case Study Title
Featured Case Study
Case Study Title
{{
fifty.render({
subtitle: 'Featured Case Study',
headline: 'Case Study Title',
description: 'We educate and work closely with clients to obtain the best combination of price, deal terms and cultural compatibility. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
link: {
linkText: 'Learn More',
path: '/custom/path'
},
image: {
src: '/images/url.jpg',
alt: ''
},
theme: 'light' //or 'dark'
})
}}
Home Hero
{{
banner.home({
headline: 'Welcome Sentence Goes Here Lorem Ipsum Dolor',
subtitle: 'SUBTITLE HERE',
bgImage: '/images/background.jpg'
})
}}
Statistic
Dynamically reinvent cross-unit architectures for prospective channels. Compellingly initiate performance based web-readiness with innovative functionalities. Compellingly formulate extensible customer service vis-a-vis economically sound niches. Credibly visualize cost effective growth strategies after B2C quality vectors. Continually impact optimal scenarios rather than dynamic best practices. Continually customize wireless supply chains and premium benefits. Progressively conceptualize prospective best practices before alternative content. Objectively disseminate pandemic sources for installed base quality vectors. Dramatically optimize business e-services rather than enabled expertise. Efficiently actualize functionalized leadership vis-a-vis synergistic methods of empowerment.
By the Numbers
-
Mufson was founded in
2003
-
Our bankers have completed
600+
client transactions
{{
stats.render({
content: 'Dynamically reinvent cross-unit architectures for prospective channels. Compellingly initiate performance based web-readiness with innovative functionalities. Compellingly formulate extensible customer service vis-a-vis economically sound niches.',
statBlockTitle: 'By the Numbers',
statBlocks: [
{
firstStatement: 'Mufson was founded in',
figure: '2003'
},
{
firstStatement: 'Our bankers have completed',
figure: '600+',
secondStatement: 'client transactions'
}
]
})
}}
Mid Page Banner
{{
banner.midPage({
subtitle: 'Our History',
headline: 'History Headline',
supportingCopy: 'We educate and work closely with clients to obtain the best combination of price.',
bgImage: '/images/background.jpg'
})
}}
Short Hero
{{
banner.short({
subtitle: 'Subtitle Here',
headline: 'Transactions headline here lorem ipsum',
bgImage: '/images/background.jpg'
})
}}
Title and Copy
Facilities Management
Facilities Management
Customer Relationship Management
Consumer Products
Facilities Management
Facilities Management
Customer Relationship Management
Consumer Products
{{
titleCopy.render({
groups: [
{
title: 'Facilities Management',
body: 'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.',
link: {
path: 'custom/path',
linkText: 'Learn More'
}
},
{
title: 'Facilities Management',
body: 'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.'
},
{...}
],
layout: 'columns' //or 'rows'
})
}}
