Overview

Introduction

This is the Pattern Library for BDP

Branding

Colors
Brand Blue #206bff
Ice #ebf2ff
Fog #b4b4b4
Steel #41567e
Navy #2e3c54
Midnight #0d121a
Gradients
Primary Gradient linear-gradient(133deg, #2D74FF 0%, #9D59FF 100%)
Secondary Gradient linear-gradient(-45deg, #F58331 0%, #FFF367 100%)
Tertiary Gradient linear-gradient(133deg, #6BD6F1 0%, #37E188 100%)
Quaternary Gradient linear-gradient(133deg, #206BFF 0%, #6BD6F1 100%)

Typography

Extra Large Title

Extra Large Title Sans


                            

Extra Large Title Sans

Large Title

Large Title


                            

Large Title

Medium Title

Medium Title


                            

Medium Title

Extra Small Title

Small Title


                            

Small Title

Large Body Text

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


                            

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Small Body Text

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


                            

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


                            
{% import "/macros/link.html" as link %}

{{
  link.text({data})
}}


                          
Buttons

                            
{% import "/macros/link.html" as link %}

{{
  link.button({data})
}}


                          
Breadcrumbs

                            
{% import "/macros/breadcrumb.html" as bc %}

{{
  bc.render(page)
}}