webkit component checklist

References for Design System, Pattern Library Structure

Foundation : Base : Primitives : Atoms

• [ ] typography
  • [ ] display
  • [ ] headers
  • [ ] body
  • [ ] blockquotes
  • [ ] links
• [ ] color
  • [ ] brand
  • [ ] gray scale
• [ ] border radius
• [ ] box shadow

Components

• [ ] buttons
  • [ ] disabled
  • [ ] hover
  • [ ] focus
  • [ ] active
  • [ ] icon
• [ ] button groups
• [ ] icon buttons
• [ ] cards
  • [ ] link
    • [ ] hover
• [ ] forms
  • [ ] input
  • [ ] textarea
  • [ ] checkbox
  • [ ] radio
  • [ ] select
  • [ ] number input
  • [ ] slider
  • [ ] switch
• [ ] data display
  • [ ] badge
  • [ ] code
  • [ ] divider
  • [ ] kbd
  • [ ] list
  • [ ] stat
  • [ ] table
  • [ ] tag
• [ ] feedback
  • [ ] alert
  • [ ] circular progress
  • [ ] progress
  • [ ] skeleton
  • [ ] toast
• [ ] Overlay
  • [ ] alert dialog
  • [ ] drawer
  • [ ] menu
  • [ ] modal
  • [ ] popover
  • [ ] tool tip
• [ ] Diclosure
  • [ ] accordian
  • [ ] tabs
  • [ ] visually hidden
• [ ] Navigation
  • [ ] breadcrumbs
  • [ ] link
  • [ ] link overlay
• [ ] Media Icons
  • [ ] avatar
  • [ ] icon
  • [ ] image

Components

Cards

Cards are a high-level ui element used to visually separate content. Cards can be broken into two categories, interactive and static. Interactive cards are used to move users to other pages of an app. This is normally visually identified but a hover, focus effect to indicate intractability. Static cards are leveraged to group content that has similar intent of focus.

Card Design Convention

To keep a design consistent and organized a good practice is to start with a single card base where border, border-radius, and shadow are decided for example. From this base create profile, article, metric, and link cards, etc.

Interactive Cards

A convention for interactive cards is to use border or shadow to show a z-axis separation from the rest of the content flow.