Overview

Introduction

This is the Pattern Library for Mufson Howe Hunter.

Branding


                            
{{
  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
Black #000000
Dark Blue #042033
Medium Blue #0A3553
Blue #08456F
Light Blue #005B9A
Tan #C8AF8B
Dark Tan #BD9F74
Cream #EADECD
Grey #DADADA
Off White #F6F6F6
Dark Off White #DDDDDD
Gradients
Dark Gradient linear-gradient(180deg, #08456F 0%, #042033 100%)
Light Gradient linear-gradient(0deg, #0A3553 0%, #08456F 100%)

Typography

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.


                            
                          

                            
{{
  link.text(
    {
      path: '',
      linkText: '',
      classes: ['']
    }
  )
}}


                          

                            
{{ link.button(
  {
    path: '',
    linkText: '',
    classes: ''
  }
) }}


                          

                            
{{ link.ghostButton(
  {
    path: '',
    linkText: '',
    classes: ['']
  }
) }}


                          

                            
{{
  pager.render(
    {
      page: 2,
      total: 10,
      shown: 3
    },
    'http://localhost:3000/styleguide'
  )
}}


                          

                            
{{
  filters.render({
    categories: [
      {
        label: 'Business Service',
        value: 'business'
      },
      {
        label: 'Consumer Products',
        value: 'consumer'
      },
      {
        label: 'Technology',
        value: 'tech'
      },
      {
        label: 'Manufacturing',
        value: 'manufacturing'
      }
    ]
  })
}}


                          

Piece Components

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
      }
    ]
  })
}}


                          

Widgets

Call to Action

Call to action lorem ipsum

Supporting text lorem ipsum curabitur blandit tempus porttitor.
Learn More

                            
{{
  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

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.
Learn More Right Arrow

Featured Case Study

Case Study Title

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.
Learn More Right Arrow

                            
{{
  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

SUBTITLE HERE

Welcome Sentence Goes Here Lorem Ipsum Dolor


                            
{{
  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

Our History

History Headline

We educate and work closely with clients to obtain the best combination of price.

                            
{{
  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

Subtitle Here

Transactions headline here lorem ipsum


                            
{{
  banner.short({
    subtitle: 'Subtitle Here',
    headline: 'Transactions headline here lorem ipsum',
    bgImage: '/images/background.jpg'
  })
}}


                          
Title and Copy

Facilities Management

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. Learn More Right Arrow

Facilities Management

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. Learn More Right Arrow

Customer Relationship Management

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.

Consumer Products

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.

Facilities Management

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. Learn More Right Arrow

Facilities Management

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. Learn More Right Arrow

Customer Relationship Management

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.

Consumer Products

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.

                            
{{
  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'
  })
}}