Bin Doctor Logo Banner

Styles

Home / Styles

Typography

H1 Helvetica Bold 48px

H2 Helvetica Bold 35px

H3 Helvetica Bold 26px

H4 Helvetica Bold Uppercase 22px

H5 Helvetica Bold 18px
H6 Helvetica Bold 16px

Small Text Helvetica Regular 16px inherit

Paragraph Helvetica Regular 18px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante nisl. Sed sit amet massa pharetra, vulputate lectus eu, tristique ante.

Hyperlink Helvetica Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante nisl. Sed sit amet massa pharetra, vulputate lectus eu, tristique ante.

Bold Helvetica Bold Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante nisl. Sed sit amet massa pharetra, vulputate lectus eu, tristique ante.

Horizontal Rule

Blockquote Helvetica Bold 22px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

— Author, Title Helvetica Italic 16px

Images

Image not found
This is the image caption.

Colors

Branding

primary
#004a8c
secondary
#3498DB
tertiary
#009660
brand-1
#89c43d
brand-2
#3390cd
brand-3
#fbcf0a
brand-4
#d9e499
brand-5
#93c5e3
brand-6
#133977
brand-7
#009660

Tints

tint-white
#ffffff
tint-5
#f2f2f2
tint-10
#e6e6e6
tint-15
#d9d9d9
tint-20
#cccccc
tint-25
#bfbfbf
tint-30
#b3b3b3
tint-35
#a6a6a6
tint-40
#999999
tint-45
#8c8c8c
tint-50
#808080
tint-55
#737373
tint-60
#666666
tint-65
#595959
tint-70
#4d4d4d
tint-75
#404040
tint-80
#333333
tint-85
#262626
tint-90
#1a1a1a
tint-black
#000000

System

success
#91be4a
warning
#ffaa00
error
#aa0000

Buttons

Default
Hover
Disabled

Primary

Secondary

Text

Lists

Ordered List

  1. Ordered item 1
  2. Ordered item 2
  3. Ordered item 3

Unordered List

  • List item 1
  • List item 2
  • List item 3

Tables

This theme uses Javascript to wrap all content managed tables in a .table-wrapper class in order to apply visual and responsive styling.

Column Heading Column Heading Column Heading Column Heading
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content

Forms

No Value
Helper text / hint
Default
Helper text / hint
Hover
Helper text / hint
Focus
Helper text / hint
Error
Helper text / hint
Disabled
Helper text / hint
Helper text / hint
Helper text / hint
Checkboxes
Radio Buttons

Layouts

1/1
1/2
1/2
1/3
1/3
1/3
2/3
1/3

Sidebar

Sidebar CTA

Image not found

Long Heading Lipsum Dolor Sit Ameta Faucibus Enim

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

Call to Action

Featured Post

Recent Posts

View all

Components

Accordions

Accordion 1

Accordion 1 content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, urna lacinia ultricies hendrerit, ex felis pharetra enim. Aliquam erat volutpat. Praesent eget volutpat nisl. Phasellus sed odio rhoncus, hendrerit lacus eu, iaculis felis. Vivamus pellentesque consequat libero quis porta. Vivamus a ornare eros.

Accordion 2

Accordion 2 content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, urna lacinia ultricies hendrerit, ex felis pharetra enim. Aliquam erat volutpat. Praesent eget volutpat nisl. Phasellus sed odio rhoncus, hendrerit lacus eu, iaculis felis. Vivamus pellentesque consequat libero quis porta. Vivamus a ornare eros.

Accordion 3

Accordion 3 content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, urna lacinia ultricies hendrerit, ex felis pharetra enim. Aliquam erat volutpat. Praesent eget volutpat nisl. Phasellus sed odio rhoncus, hendrerit lacus eu, iaculis felis. Vivamus pellentesque consequat libero quis porta. Vivamus a ornare eros.

Tabs

First Tab Second Tab Third Tab

Tab 1 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, urna lacinia ultricies hendrerit, ex felis pharetra enim. Aliquam erat volutpat. Praesent eget volutpat nisl. Phasellus sed odio rhoncus, hendrerit lacus eu, iaculis felis. Vivamus pellentesque consequat libero quis porta. Vivamus a ornare eros.

Tab 2 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, urna lacinia ultricies hendrerit, ex felis pharetra enim. Aliquam erat volutpat. Praesent eget volutpat nisl. Phasellus sed odio rhoncus, hendrerit lacus eu, iaculis felis. Vivamus pellentesque consequat libero quis porta. Vivamus a ornare eros.

Tab 3 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, urna lacinia ultricies hendrerit, ex felis pharetra enim. Aliquam erat volutpat. Praesent eget volutpat nisl. Phasellus sed odio rhoncus, hendrerit lacus eu, iaculis felis. Vivamus pellentesque consequat libero quis porta. Vivamus a ornare eros.

Article Listings

Featured Article