UI KIT components list

UI Kit components ready for implementation in Drupal

• Accessibility
  • helper classes (block and text)
  • skip to content
  • skip to navigation
• Accordions
• Alerts/message boxes (Where is the style for the messages?)
  • info
  • warning
  • error
  • warning
• Buttons (basic button styles)
• Forms
  • input styles
  • help text/field descriptions
• Grid
  • breakpoints
  • viewports
  • mobile first
• Link styles
  • internal
  • external
  • states (active, focus, hover, visited)
• List styles
  • ordered
  • unordered
  • horizontal style
  • vertical style
  • small list style
  • highlighted words style
• Navigation
  • breadcrumbs
  • global menu
  • site menu
  • local menu
  • tabs (Drupal local tasks)
• Tables
  • responsive
  • types
  • data
• Typography
  • headings
  • blockquote
  • small text
  • time / date
  • paragraph
  • figure
  • caption
  • tooltips
  • font stack

Components that require community discussion

• Buttons
  • sizes
  • variations
• Calendar
• Carousel (implementation exists within new govCMS UI Kit based theme)
• Comment
• Embedded media
  • YouTube
  • SoundCloud
  • Vimeo
• Forms
  • CAPTCHA
  • select element
• Forums
• Icons (Health priority)
  • what is our strategy for icons
  • common .svg library that is comprehensive and fits the overall theme (font awesome?)
• Link styles
  • document / file
  • quick links (don’t know what this means)
• List styles
  • checklists (with form elements??)
  • A-Z
• Modals
• Multilingual controls (language versions of same content, different “sub-sites”)
• Navigation
  • horizontal and vertical tabs (for use in content?)
• Pagination (First, prev, 1 2 3 ... 13, 14, 15 next, last)
• Page header (Health priority)
  • design
  • crest placement
  • elements
  • commonalities
  • image assets
• Page footer (Health Priority)
  • elements
  • commonalities
  • image assets
• Page last updated
• Progress bar (animated single step and multistep/page)
• Readspeaker (there are vendor considerations here)
• Search
  • the input/button pattern, placeholder text etc
  • autocomplete (results, loader icon etc)
  • search result
  • promoted search results
• Site branding (Departmental and agency) (Health priority)
• Social media (Health priority)
  • icons for links to services
  • embedded feeds
  • share icons
• Typography
  • heading levels 4 through 6 (implementation or documentation)