| CARVIEW |
Select Language
HTTP/2 301
cache-status: "Netlify Edge"; fwd=miss
content-type: text/html
date: Sat, 11 Oct 2025 23:45:34 GMT
location: /patterns/
server: Netlify
strict-transport-security: max-age=31536000
x-nf-request-id: 01K7ATMNGKXGPZX7QHBJNX7CCE
content-length: 98
HTTP/2 200
accept-ranges: bytes
age: 0
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; fwd=miss
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Sat, 11 Oct 2025 23:45:34 GMT
etag: "a652c5baf5b8661168eefa9e39eae337-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7ATMNZRZPQ3ECFAZGHJ3DFZ
Common UI Patterns
Grab & Go Patterns
A collection of built patterns to use as starting points, complete with fallbacks. Remember that you do not need to use these for full page layout, they could as easily be a small component in a design.
-
Header, 2 col, footer
A flexible, two column layout with a header and footer. -
Header, 2 col, footer
A responsive, two column layout with a header and footer. -
Header, 2 col, footer
A responsive, two column layout with a header and footer. Using rows to create space -
As many as fit
This layout has a centre panel into which we want to display as many boxes as will fit before moving to the next row. -
As many as fit some tall
This layout has a centre panel into which we want to display as many boxes as will fit before moving to the next row. Some items span two rows. -
Media Objects
A standard media object with the ability to be nested and flipped.