B Bath Clinic B Bath Clinic O Ocean Beach Clinic P Park Animal Hospital B Balboa Pet Hospital Add another clinic Customize style Sign out from all clinics Dashboard Payments All transactions Payments Disputes Reports Payments Disputes Payouts Settings Laura Williams View profile Settings Show keyboard shortcuts
Cmd+K
 Help & Support API Sign out

@Container driven responsive design

Create new Export data as Spreadsheet

Responsive Grid

n:@container defines the query context. n:@s:grid-cols-2 and n:@l:grid-cols-3 adjust columns based on container width.

Revenue

Appointments

New Patients

Stack to Horizontal Layout

n:flex-col stacks items vertically by default. n:@s:flex-row switches to horizontal when container is wide enough.

Left Panel

Stacks on narrow containers

Right Panel

Side-by-side when wider

Conditional Visibility

n:hidden n:@m:block hides content on small containers, shows on medium+. n:@m:hidden does the opposite.

Visible on medium+ containers
Visible on small containers only
Always visible

Responsive Typography

n:text-l n:@m:text-xl n:@l:text-2xl scales text size based on container width.

This heading grows with the container

Body text can also adapt to available space

Named Containers

n:@container/card creates a named container. n:@s/card:flex-row targets that specific container.

Card A

Responds to its own container

Card B

Independent of sibling containers