Columbia Design System 1.1
Columbia Design System is now integrated with the University Web and Identity Guidelines in a new website. Design System still features responsive and accessible code that is in keeping with Columbia web development, design, and security guidelines—now located in one convenient place.
We've also added the following components:
- Autocomplete
- Brand Bar
- Card
- Carousel
- Date Range Picker
- Event Calendar
- Footer Navigation
- Main Navigation
- Search
- Table
Stay tuned as we plan to add additional code and features, and let us know if you’d like to suggest one.
Columbia Design System 1.0
Columbia Design System is a collection of modular design elements meant to provide digital designers and developers with ready-to-use code that is responsive, accessible, and in keeping with Columbia web development, design, security, accessibility, and identity guidelines.
Design System is available to all Columbia faculty, staff, and students, and can be used on any Columbia digital project. Version 1.0 includes these features:
Quick-start Guide
Read the developer guide for step-by-step instructions on getting the most out of this system. The guide provides handy references to University branding and security guidelines as well as information on accessibility, usability, and domain names and other helpful advice.
Components
The initial set is the first of several planned batches; here’s what you can use right now:
- Accordion
- Alert
- Breadcrumb
- Button
- Drop Down
- Hero
- Modal Window
- Pagination
- Pull Quote
- Progress Bar
- Toggle Switch
- Icons
We have plans to build out additional components, so check back often or email us with questions at [email protected].