SJSU Online Hybrid Master of Social Work Program

Context Is Important

Individual cards are ideal for showcasing many items simultaneously. They're great for highlighting a variety of diverse things that might each require additional information to provide detail or context.

Links vs Calls

If you need to link to content on another site or link to a sub-page, you can make the title of the card a link. Alternatively, a card can also feature what's known as a "Call To Action."

Call To Action

A link to a subpage, or a different website, isn't a call to action. "Learn more" is vague and shouldn't be used. A call to action uses a strong verb to encourage the user to do something that results in a concrete, measurable change or effect;
For example: "Apply to the program", "Subscribe to the newsletter", or "Open a help ticket" are all good calls to action.

Images Are Optional

Images on cards are optional. But if they are used, they should have a clear, focused subject relevant to content of the card. A very zoomed-out photo with a lot of people is too difficult to see in the smaller slot the card uses. Images should be around 420 pixels wide for an ideal fit for the Card Component.

Stock Photos Are NOT "Better than nothing"

It is often better to not have anything at all than to use a generic stock photo. Authenticity is important to providing a good user experience on the web. As beautiful as the SJSU campus can be, wide landscape views of Tower Hall probably aren't relevant to telling your story.

Alt Text Is Mandatory

Federal and state law, as well as CSU policy, require an alternative text description for any media added to a web page. While the Card Component features text boxes, the "alt" attribute must still be filled out with relevant details.

Avoid Large Sets of Cards

Try to avoid going above six cards.

Use More Than Just Cards

If you have more than six cards worth of content, break the content down across two or three different components. Try to "chunk" similar content together and use the Section Title Component to label them.