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.


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

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


                          
People Cards

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