Grimm & Parker

Pattern Library

Overview

Introduction

This is the pattern library for Grimm & Parker.

Branding

Colors
Black #000
White #FFF
G+P Green #84C141
Berry #ED7AA4
Sun #FFB717
Aqua #E9F3F5
Stone #EDEDED
Concrete #9FA3AA
Slate #50565E
Dark Slate #1A2E33

Typography

Largest Serif

Largest Serif


                            

Largest Serif
Largest Sans

Largest Sans


                            

Largest Sans
Large Serif

Large Serif


                            

Large Serif
Large Sans

Large Sans


                            

Large Sans
Medium Serif

Medium Serif


                            

Medium Serif
Medium Sans

Medium Sans


                            

Medium Sans
Small Label

Small Label / Subtitle


                            

Small Label / Subtitle
Small Title

CTA / Small Title


                            

CTA / Small Title
Body

Body nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.


                            

Body nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.

Links & Pagination

Links

                            
{{
  link.text({
    link: {
      linkText: 'Learn More About Our Process',
      linkTarget: true,
      linkType: 'custom',
      path: '#'
    }
  })
}}
Pagination

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

Cards

Resource Cards

Discovery STEM Academy 


                            
{{
  card.render({
    title: 'Discovery STEM Academy',
    image: {
      imagePath: '/imgs/resource-card.jpg',
      alt: ''
    },
    linkPath: '/',
    type: 'resource'
  })
}}
People Cards
Portrait Alt Text

Mel Thompson 


                            
{{
  card.render({
    title: 'Mel Thompson',
    image: {
      imagePath: '/imgs/portrait.jpg',
      alt: 'Portrait Alt Text'
    },
    linkPath: '/',
    type: 'people'
  })
}}
Cards List

                            
{{
  card.render({
    title: 'Mel Thompson',
    image: {
      imagePath: '/imgs/portrait.jpg',
      alt: 'Portrait Alt Text'
    },
    linkPath: '/',
    type: 'people'
  })
}}

Filters

Single Filter Type

                            
{% set piecesFilters = [
  {
    name: 'updateType',
    label: 'View By Update Type',
    filters: [
      {
        label: 'All Updates',
        value: ''
      },
      {
        label: 'Insights',
        value: 'insights'
      },
      {
        label: 'Press',
        value: 'press'
      },
      {
        label: 'News',
        value: 'news'
      }
    ]
  }
] %}

{{
  filters.render({
    query: data.query,
    url: data.url,
    piecesFilters: piecesFilters
  })
}}
Multiple Filter Types

                            
{% set piecesFilters = [
  {
    name: 'categories',
    label: 'View By Category',
    filters: [
      {
        label: 'All Projects',
        value: ''
      },
      {
        label: 'Featured',
        value: 'featured'
      },
      {
        label: 'Awards',
        value: 'awards'
      },
      {
        label: 'Education',
        value: 'education'
      },
      {
        label: 'Elementary Schools',
        value: 'elementary-schools'
      },
      {
        label: 'Middle Schools',
        value: 'middle-schools'
      },
      {
        label: 'High Schools',
        value: 'high-schools'
      },
      {
        label: 'Higher Education',
        value: 'higher-education'
      },
      {
        label: 'Independent Schools',
        value: 'independent-schools'
      },
      {
        label: 'Libraries',
        value: 'libraries'
      },
      {
        label: 'Residential + Mixed Use',
        value: 'residential-mixed-use'
      },
      {
        label: 'Civic, Cultural + Performing Arts',
        value: 'civic-cultural'
      },
      {
        label: 'Health Care + Wellness',
        value: 'health-care-wellness'
      },
      {
        label: 'Federal Government',
        value: 'federal-government'
      },
      {
        label: 'Commercial, Retail + Mixed Use ',
        value: 'commercial-retail'
      },
      {
        label: 'Market Rate Residential + Mixed Use',
        value: 'market-rate'
      },
      {
        label: 'Affordable Housing',
        value: 'affordable-housing'
      },
      {
        label: 'Senior Living',
        value: 'senior-living'
      },
      {
        label: 'Fast Track + Mission Critical',
        value: 'fast-track'
      },
      {
        label: 'Student Residences',
        value: 'student-residences'
      },
      {
        label: 'Parking Structures',
        value: 'parking-structures'
      },
      {
        label: 'Historic Preservation + Renovation',
        value: 'historic-preservation'
      },
      {
        label: 'Recreation',
        value: 'recreation'
      }
    ]
  },
  {
    name: 'expertise',
    label: 'Filter By Expertise',
    filters: [
      {
        label: 'All Expertise',
        value: ''
      },
      {
        label: 'Architecture',
        value: 'architecture'
      },
      {
        label: 'Sustainability',
        value: 'sustainability'
      },
      {
        label: 'Interior Design',
        value: 'interior-design'
      },
      {
        label: 'Master Planning',
        value: 'master-planning'
      },
      {
        label: 'Community Engagement',
        value: 'community-engagement'
      },
      {
        label: 'Programming',
        value: 'programming'
      }
    ]
  }
] %}

{{
  filters.render({
    query: data.query,
    url: data.url,
    piecesFilters: piecesFilters
  })
}}