Pattern Library

Overview

Introduction

Hello. This is an empty pattern library boilerplate.

Branding

Colors
Black #000000
Navy #002E6F
Accessible Red #D21235
Decorative Red #EE2C49
Violet #563D9D
Neutral #F6F6F6
Cyan #00AEEF
Cloud #EFFBFF
Rose #FF8A9C
Pink #FBF1F5
Purple #B79AF3
Lavender #F6F6F6

Typography

Large Title

The quick brown fox jumps over the lazy dog


                            

The quick brown fox jumps over the lazy dog

Medium Title

The quick brown fox jumps over the lazy dog


                            

The quick brown fox jumps over the lazy dog

Base Title

The quick brown fox jumps over the lazy dog


                            

The quick brown fox jumps over the lazy dog

Small Title Serif

The quick brown fox jumps over the lazy dog


                            

The quick brown fox jumps over the lazy dog

Small Title Sans

The quick brown fox jumps over the lazy dog


                            

The quick brown fox jumps over the lazy dog

Large Body Text Serif

Large Body quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


                            

Large Body quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Large Body Text Sans

Large Body quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


                            

Large Body quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Small Body Text Serif

Body quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


                            

Body quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Small Body Text Sans

Body quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


                            

Body quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Meta Text

The quick brown fox jumps over the lazy dog.


                            

The quick brown fox jumps over the lazy dog.

Buttons & Pagination

Primary Button

                            
{{
  button.secondaryButton({
    link: {
      linkText: 'Build Your Ballot',
      linkType: 'custom',
      path: '#'
    }
  })
}}


                          
Secondary Button

                            
{{
  button.button({
    link: {
      linkText: 'Load More',
      linkTarget: true,
      linkType: 'custom',
      path: '#'
    }
  })
}}


                          
Featured Buttons

                            
{{
  button.featuredButton({
    link: {
      linkText: 'See more of our impact',
      linkType: 'custom',
      path: '#'
    },
    type: 'primary'
  })
}}

{{
  button.featuredButton({
    link: {
      linkText: 'See more of our impact',
      linkType: 'custom',
      path: '#'
    },
    type: 'secondary'
  })
}}

{{
  button.featuredButton({
    link: {
      linkText: 'See more of our impact',
      linkType: 'custom',
      path: '#'
    },
    type: 'tertiary'
  })
}}


                          
Pagination

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


                          

Form Elements

Text Input

                            
                          
Select

                            
                          
Radio
Radio Choice Question Label

                            
                          
Checkbox
Multiple Choice Question Label

                            
                          
Newsletter Signup

                            
                          
Pieces Filters

Filter By Category

Select Category

Filter By Year

Select Year


                            
                          
Search Form

                            
                          

Widgets

Link List

                            
                          
Rich Text

Large Headline

Medium Headline

Small Subheadline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi! 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. 

Subheadline

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 


                            
{{
  richText.render(data.widget)
}}