Map / List Width Study

List slightly wider than map

Five ways to make the building rows read a touch wider than the map above them while staying balanced and on-brand. Pick one and we'll apply it.

01

Inset Map

Map has mx-3 side margin, list is full-bleed

inset map

Buildings

01CristallaBelltown
02One Pacific TowerQueen Anne
03The CosmopolitanDowntown
04EscalaFirst Hill
05Fifteen Twenty-OnePike Place
02

Overflow List

List uses -mx-2 to extend past the map edges

full-width map

Buildings

01CristallaBelltown
02One Pacific TowerQueen Anne
03The CosmopolitanDowntown
04EscalaFirst Hill
05Fifteen Twenty-OnePike Place
03

90% Centered Map

Map at 90% width centered, list at 100%

90% map

Buildings

01CristallaBelltown
02One Pacific TowerQueen Anne
03The CosmopolitanDowntown
04EscalaFirst Hill
05Fifteen Twenty-OnePike Place
04

Framed Card

Map inside a padded border card, list flush

framed map

Buildings

01CristallaBelltown
02One Pacific TowerQueen Anne
03The CosmopolitanDowntown
04EscalaFirst Hill
05Fifteen Twenty-OnePike Place
05

Margined + Rail

Map mx-4, list full width with right rail

margined map

Buildings

01CristallaBelltown
02One Pacific TowerQueen Anne
03The CosmopolitanDowntown
04EscalaFirst Hill
05Fifteen Twenty-OnePike Place