UBC Simple Card Block


Cards are adaptable design components frequently utilized to structure and showcase content in a visually appealing and user-friendly way. They are commonly integrated into layouts for showcasing articles, products, profiles, or any content that benefits from an organized and visually engaging format. Cards can enhance the overall user experience by facilitating easy information scanning and interaction on websites.

At CTLT (Centre for Teaching, Learning, and Technology), we’ve created a UBC Simple Card block that features a title and hidden/hoverable description text.

Table of Contents

Example

User Profile 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo vel ligula ultricies lacinia. Maecenas convallis, libero eget vulputate pharetra, metus nunc consectetur elit, eu laoreet velit arcu in urna. Nullam varius aliquam ligula, a condimentum urna vulputate id. Phasellus vehicula dolor in elit vestibulum facilisis. Proin tincidunt tristique neque, sed auctor quam bibendum nec. Suspendisse potenti. Sed ullamcorper, enim at fermentum aliquam, mi sapien fringilla quam, non varius ligula velit ut libero. Vivamus in tortor at justo iaculis tristique.

User Profile 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo vel ligula ultricies lacinia. Maecenas convallis, libero eget vulputate pharetra, metus nunc consectetur elit, eu laoreet velit arcu in urna. Nullam varius aliquam ligula, a condimentum urna vulputate id. Phasellus vehicula dolor in elit vestibulum facilisis. Proin tincidunt tristique neque, sed auctor quam bibendum nec. Suspendisse potenti. Sed ullamcorper, enim at fermentum aliquam, mi sapien fringilla quam, non varius ligula velit ut libero. Vivamus in tortor at justo iaculis tristique.

Settings

  • Card Title: This setting introduces an attribute within the link’s title. This attribute serves the purpose of supplying extra information about the card when a user hovers their mouse pointer over the link. It is a valuable asset for enhancing the user experience and promoting accessibility on websites because it grants you the capability to provide additional context or descriptions for links.
  • Link URL: This setting specifies the destination to which users will be directed when they click anywhere within the card.
  • This setting allows you to use an image as the background of the card.
  • Background Color: This setting allows you to use a color as the background of the card.
  • Text Color: This setting allows you to set the text color.

Mobile Friendly

The UBC Simple Card Block is mobile friendly.

Accessibility

The UBC Simple Card Block conforms with WCAG 2.1 AA Guidelines, ensuring that all users can navigate and interact with its content easily and effectively. Please ensure the content you put into your cards also conforms with the same standards.

Code

The UBC Simple Card Block plugin is Open Source.

https://github.com/ubc/UBC-Simple-Card-Block

How to use the block on UBC CMS?

Navigate to your site’s Dashboard on UBC CMS and go to Plugins. Search for UBC Simple Card Block and activate the plugin. proceed to the specific post or page you wish to edit. Click the + button located in the top-left corner or in the desired location on the page to add a block. Finally, search for Simple Card to insert it into your content.

Back to List of Blocks