This repository has been archived by the owner on Nov 20, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
UI KIT components list
Chris Cook edited this page Dec 13, 2016
·
14 revisions
- Accessibility
- helper classes (block and text)
- skip to content
- skip to navigation
Accordions- Alerts/message boxes
- Buttons
-
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
- Carousel (DHS)
- implementation exists within new govCMS UI Kit based theme, need to look and see if it can be used, there was general agreement at the workshop that these should be avoided, suggested that DTA provide documentation on this front.
- Icons (DHS & Health)
- common .svg library that is comprehensive and fits the overall theme. Health are using Font Awesome, DTA didn't raise any objections to it's use. Would be good to get some agreement on whether this would be the standard library.
- Logon (DHS)
- DHS have a unique requirement where they have a popup to direct people to logon to a number of various services, what would be the best approach to this?
- Page header (Health)
- design (common default elements and layout)
- crest placement
- common image assets
- site specific branding
- Page footer (Health)
- design (common default elements and layout)
- common image assets
- Search (DHS)
- the input/button pattern, placeholder text etc
- autocomplete (results, loader icon etc)
- search result format (title, snippet, url?)
- promoted search results
- Social media (Health)
- icons for links to services
- embedded feeds
- share icons
- Buttons
- size and colour variations, buttons for operations like save, delete cancel etc.
- Calendar
- DHS raised this as a requirement, they don't believe they need it anymore, suggest removing it.
- Comment
- styling of a comment against content and what content is show (date/time, username or identifier if available/appropriate etc).
- Embedded media (YouTube, SoundCloud, Vimeo)
- should there be any visual treatment of the wrapper that's used to embed external media within content?
- Forms
- CAPTCHA - there was general agreement at the workshop that this should be avoided, suggested that DTA provide documentation on this front. If it has to be used, is there an agreed best implementation?
- select element - there's no treatment of selected, DTA indicated they should be avoided, again, documentation to this end would be useful.
- Forums
- Link styles
- document/file - what information should be shown when linking to files (file size etc).
- List styles
- checklists - a dedicated list style to show a list of actions or tasks that the user has to complete as opposed to a list of bulleted content items
- A-Z lists - list of items grouped by first letter in each item
- Modals
- Multilingual controls
- how are controls presented for different language versions of same content
- how to indicate a link to a single page of content with multiple languages on it
- Navigation
- horizontal and vertical tabs for use in content
- Pagination
- treatment for: First, prev, 1 2 3 ... 13, 14, 15 next, last
- Page last updated
- placement and language
- Progress bars
- animated single step progress bar for batch processes or loading app loading screens
- multistep page or processes
- Readspeaker
- there are vendor considerations here, but multiple Gov sites use this, would be good to develop a common implementation
- Typography
- heading levels 4 through 6, DTA indicated that content should not go down to this level (suggests content issues), need some documentation on this.