Cards & Wells

Use cards and wells to clearly distinguish different sections of content and make it easy for users to understand the layout and structure with well-organized content.

Cards and wells are designed to be responsive so that they look good and function well on different screen sizes and devices. The color contrast in wells and cards have been reviewed to be sure they are accessible to all users, including those using screen readers or other assistive technologies.

Within the Sitefinity Content Management System we can wrap content in cards or wells various ways: use them in html on content blocks and several modules, or apply to a content block or module “more options” area in the page. 

Choosing between cards and wells depends on the context and purpose of the content you want to display. By considering the purpose and context of your content, you can decide whether wells or cards are the most appropriate design pattern to use.

Here are some guidelines to help you decide when to use each:

Cards are best for displaying modular, interactive content in a visually appealing, easy-to-scan layout.

• Display Modular Content: Use cards to display modular content that can stand alone and is easy to scan.
• Organize Content in a Grid or List Layout: Use cards when you need to organize content in a grid or list layout, making it easy for users to browse and find specific items.
• Interactive Content: Use cards when you have content that users can interact with, such as buttons, links, or embedded media.
• Visual Emphasis: Use cards to create a visually appealing layout, especially when you have images or media to display.

Wells are best for highlighting important, contextual, or temporary information that needs to stand out on a page.

• Highlight Important or Temporary Information: Use wells to draw attention to critical information, such as warnings, alerts, important notices or for information that may change frequently or is relevant only for a certain period.
• Provide Context or Instructions: Use wells to provide contextual information or instructions that users need to read before proceeding.
• Separate Different Sections: Use wells to visually separate different sections of content on a page to improve readability and organization.

Wells have a default style for most colors with a muted version of the brand colors. Adding the callout class will remove the muting of the color and bold the text to render a more vibrant well. 

<div class="well">
    ...
</div>

<div class="well callout">
    ...
</div>

<div class="well well-red">
    ...
</div>

<div class="well well-red callout">
    ...
</div>

<div class="well well-gray">
    ...
</div>

<div class="well well-gray callout">
    ...
</div>

<div class="well well-blue">
    ...
</div>

<div class="well well-blue callout">
    ...
</div>

<div class="well well-green">
    ...
</div>

<div class="well well-green callout">
    ...
</div>

<div class="well well-orange">
    ...
</div>

<div class="well well-orange callout">
    ...
</div>

<div class="well well-teal">
    ...
</div>

<div class="well well-teal callout">
    ...
</div>

Content modules create collections of content that can be displayed on web pages and in templates. The following modules allow users to add cards and wells on the websites through the WYSIWYG editor on the widgets or content items which allow for a full HTML view of the content as well as by adding them to the More Options region on the widget in the page: Content Blocks, Lists, Blogs and Events modules. Learn more about adding content and classes to each of these modules by clicking on the provided links. 

Learn how to use the WYSIWYG editor