Friday, February 9, 2024
Written by
Megan Yoder
OSC Web Team

One of the great aspects about Layout Builder (amongst other things) is the ability to add a variety of components in a drag-and-drop interface to a page on your website. These components empower you to build out dynamic pages and can be used as another tool to showcase your department or unit more effectively. One of the most flexible components covered by SiteNow and Layout Builder are dynamic cards. The card component can be used as both an informative piece of content or one that links users off to more content. Cards allow you to seamlessly integrate images, text, and buttons, creating a compelling link to your desired destination. Today, we will look into best practices for utilizing the card component.

Add images or icons to your cards

While not mandatory, adding images or icons to your cards can breath life into this component. With a variety of icons provided by the brand site and a wealth of images available on Photoshelter, your cards can be transformed into dynamic elements that can showcase your department or unit and enhance the visual appeal on your website.

Cards on OSC website
An example showcasing use of cards with brand approved icons as seen on osc.uiowa.edu.
housing website cards
An additional example showcasing cards with authentic campus images from Photoshelter as seen on housing.uiowa.edu.

Ensure proper alignment

When using cards, precision is important. As you work to add your cards make sure they have proper alignment and space on your pages. Failing to pay attention to this aspect can result in unnecessary spacing gaps and pages that appear visually disjointed to users. For example, avoid placing three cards in a four-column layout where an evenly balanced three-column layout will do. Ensuring proper page alignment when you add cards will enhance your page's overall visual appearance, cohesiveness, and user experience.

Card content type
An example of a poorly designed webpage and alignment by placing three cards in a four-column layout. The extra spacing on the far right makes the cards look uneven on the page. 
Card content type
An example of a thoughtfully designed webpage and alignment by placing three cards in a three-column layout, ensuring consistent alignment and spacing. 

Maintain a consistent style

When working with the card component, it is important to maintain consistency in your style and formatting for cards that are near one another on given page. For instance, in a three-column layout of cards, make sure that all media items within the cards are aligned uniformly and follow the same display format. Divergent formats may result in a visually disjointed appearance for your cards.

Cards example
An example of a poorly designed card component showing a left-media-aligned circle, a center-aligned square and a right card component with no media in it. It is best practice to ensure all your cards are consistent in style. 

Add descriptive text to your cards

Elevate your cards by weaving in descriptive text, which will act as a guide for users. Ideally, this should be short sentences providing more information and help your user understand what they can expect to find then they click on the card. Be careful, as adding too much text can overwhelm the card component itself and the user. Strike the right balance between visual imagery, descriptive text, and button text. 

Cards on OSC website
An example of descriptive text on a card component as seen on osc.uiowa.edu. Notice how card text is kept simple and brief in order to communicate what a user can expect to find, but limited to short sentences as to not overwhelm a user. 

Avoid misuse of cards

While there are many ways that you can use cards, there are also ways that they can be misused. One common mistake to avoid is using them to manage and link to articles on your site. This not only proves ineffective but also poses a challenge for content owners. Opting for this approach complicates content management, necessitating the creation of new cards for each article. Instead, we recommend not using the card component and instead relying on the article component itself. Doing so allows you to easily pull in articles to a given page, provides your users an easy way to read additional articles, and creates an easily accessible article archive for users.

Card content type
An example showcasing a poor use of cards to manage articles. Instead, we recommend using the article content type which will provide easier management for content owners and editors and also create an archive for your users. 
Articles
An example of pulling articles onto a given webpage as seen on webcommunity.sites.uiowa.edu.
Articles
By using the article component in order to manage your articles instead of the card component, you automatically create an archive of all articles on your site. This allows your users to easily navigate to previous articles based on month and year. 

Implementing these strategies can help you make the most of all the card component has to offer. By applying these insights, you can elevate your webpages to showcase your department or unit in a meaningful way and make your site more visually appealing to your users.