Articulink

Brand Guidelines

v1.0March 2026

Tables & Lists

Data tables display information in rows and columns. Include sorting, pagination, and bulk actions for complex data.

Basic Table

Simple table with header row and alternating row colors for readability.

NameEmailRoleStatus
Sarah Johnsonsarah@example.comClientActive
Mike Williamsmike@example.comParentActive
Emily Davisemily@example.comParentPending
Dr. Lisa Chenlisa@articulink.comTherapistActive
Header: bg-bg-secondary text-abyss font-semibold | Rows: divide-y divide-border | Alternating: bg-bg-secondary/50

Table with Selection

Add checkboxes for bulk selection and actions.

NameEmailRoleActions
Sarah Johnsonsarah@example.comClient
Mike Williamsmike@example.comParent
Emily Davisemily@example.comParent
Dr. Lisa Chenlisa@articulink.comTherapist

Sortable Table

Click column headers to sort data ascending or descending.

name
email
role
status
Sarah Johnsonsarah@example.comClientActive
Mike Williamsmike@example.comParentActive
Emily Davisemily@example.comParentPending
Dr. Lisa Chenlisa@articulink.comTherapistActive
Sortable header: cursor-pointer hover:bg-bg-card | Active sort icon: text-tide | Inactive: text-text-secondary/50

List View

Vertical list layout as an alternative to tables for simpler data.

SJ

Sarah Johnson

sarah@example.com

Client
MW

Mike Williams

mike@example.com

Parent
ED

Emily Davis

emily@example.com

Parent
DLC

Dr. Lisa Chen

lisa@articulink.com

Therapist

Empty State

Show when no data is available. Include helpful messaging and a CTA when appropriate.

No appointments yet

Once you book your first session, it will appear here.

Pagination

Footer with pagination controls and row count display.

NameEmailRole
Sarah Johnsonsarah@example.comClient
Mike Williamsmike@example.comParent
Emily Davisemily@example.comParent
Showing 1-10 of 247 results
...

Usage Guidelines

Do
  • Include pagination for large datasets
  • Provide sorting on relevant columns
  • Use consistent column alignment
  • Show loading and empty states
  • Make rows clickable when viewing details
Don't
  • Display too many columns on mobile
  • Hide important data in horizontal scroll
  • Use tables for simple key-value data
  • Forget to handle empty states
  • Make bulk actions hard to discover