The Card component was fairly complex within the realm of the content management system at the University of Colorado, Denver. This is because the card can display as a 'view' on any number of widgets, as well as act as its own independent widget. Thankfully from a design perspective, it's fairly straightforward.
The concept is common on a number of websites that need to display some modular data together as a whole. Whether it is pulled in dynamically or edited on the fly is irrelevant from a design standpoint. Let's take a look at a few variations:
Chris Casey | Jul 22, 2016, 10:19am
University NewsAd orci laoreet netus sapien quibusdam pharetra justo, eius necessitatibus eros perspiciatis penatibus delectus, modi, repellendus odit incididunt quia facilis sodales, harum erat possimus. Hac adipiscing nisi at molestias dictumst tortor, exercitation officiis ullam officiis adipisci! Sunt aut provident, fames.
David M. Darrin ’40 Senior Endowed Chair, Associate Dean
Ad orci laoreet netus sapien quibusdam pharetra justo, eius necessitatibus eros perspiciatis penatibus delectus, modi, repellendus odit incididunt quia facilis sodales, harum erat possimus. Hac adipiscing nisi at molestias dictumst tortor, exercitation officiis ullam officiis adipisci! Sunt aut provident, fames.
You'll see this particular design repeated throughout the Unified Design themes. A number of different content types utilize this view, including things like Event, Biography, and News. The client wished for the entire card to act as a link, so that's what we've done here. You'll notice the subtle indications on hover.
There are a number of different fields to design for, many more than those shown in these examples. It was important to design for each and every one of them, because you never know what the user will want to display in his/her card view.
Some of the code behind the Card is recycled when displaying as other content types, like Directory and Testimonial, which are shown below.
Wayfarers next level beard, Schlitz disrupt small batch Banksy locavore lumbersexual dreamcatcher wolf.- Some Student, '17
Associate Professor
Wayfarers next level beard, Schlitz disrupt small batch Banksy locavore lumbersexual dreamcatcher wolf. Wayfarers next level beard, Schlitz disrupt small batch Banksy locavore lumbersexual dreamcatcher wolf.- Some Student, '17
13001 E. 17th Place
Mail Stop B119
Aurora, CO 80045
303.724.4585
