Sample of components of various sites

This is a Work In Progress

https://bna.peopleforbikes.org

Components

Header

• logo image
• navigation

Hero

• background image
• logo image
• content

Section (Leading Cities/Towns)

• CityCard (link: https://bna.peopleforbikes.org/#/places/6862c67c-af92-49ed-a36f-9b5a44443f55)
• Map Box

Section (How the BNA Score is calculated)

• Summary Cards

Footer

• logo image
• navigation

https://bna.peopleforbikes.org/#/places////

Components

SideBar

• Form Header
• Scroll Body
  • CityCard (link)
  • Compare (checkbox)

Preview Map

https://bna.peopleforbikes.org/#/places/e1e2a2ce-f7ed-422d-8b6c-e7b67c252828/

Components

SideBar

+ CityHeader
	+ Back Navigation (button)
+ Score Header
	+ Compare	(button)
	+ Download (dropdown)
+ Meta List
	+ Hover-over popup

• Map

https://bna.peopleforbikes.org/#/places//compare/e1e2a2ce-f7ed-422d-8b6c-e7b67c252828///

Components

Affordances

+ Clear City (button)
+ Back Navigation (button)

City Columns

+ Meta data
+ Add Place to Compare (placeholder)
	+ Search Places (button)

https://www.peopleforbikes.org

Components

Header

+ Links & Login
+ Search button
	+ Modal
		+ Search Bar
		+ Side Bar
			+ filters (check buttons)
		+ News Panel
			+ News Card
		+ Close Search (button)
+ Logo Image
+ Navigation
	+ Modal
		+ 

• Section (hero)
  • background image
  • content
  • button
• Section (carousel)
  • background image
  • content
  • button
• Section (info)
  • Cards w/ links
• Section (ridespot)
  • Header
  • App Cards/images
• Section (News)
  • News Card w/links
• Footer
  • Navigation
  • Logo w/ content