Components

Combine components to create a user interface for your web site or application.

All the components in this design system are included within the University of St Andrews pattern library.

The provided examples further explain how to combine components and layouts to solve common design and UX problems.

Component variants and states

Components may contain multiple configuration options that create different variants of the core component. These variants and their parent component may have different states:

  • Ready
    The default state signifies that the component or variant is ready to use in your project. It has been tested on a range of browsers and devices and meets accessibility standards. This has also had some form of user testing to validate the user interface performs as expected.
  • Prototype
    This has meet browser and accessibility standards but has yet been proven with sufficient user testing. Use with caution as it may change in a future version.