UBC Cards Block
Cards are versatile design elements commonly used to organize and present content in an aesthetically pleasing and user-friendly manner. They are often employed in layouts for displaying articles, products, profiles, or any other type of content that benefits from a structured and visually appealing presentation. Cards can help improve the overall user experience by making it easy for users to scan and interact with information on a website or app.
In partnership with colleagues at UBC, we have effectively implemented an accessible card block.
Table of Contents
Example
Card Title Here
Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Card Title Here
Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Card Title Here
Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Settings
Styles
The Card Blocks include three predefined styles, as shown in the example above: ‘Default’, ‘Green’, and ‘Blue’.
Layout
- Block Vertical Padding: Add vertical space between the content inside the card and the edges of the card itself.
- Block Horizontal Padding: Add horizontal space between the content inside the card and the edges of the card itself.
- Button Position: By default, the button is positioned vertically alongside the content. However, you have the flexibility to switch its arrangement to a horizontal orientation as needed.
Content
- Heading Tag: Change to an appropriate HTML tag for the title to enhance the accessibility of your content.
- Heading Color: This setting determines the color of the title.
- Description Color: This setting determines the color of the description.
Button
- Type: You have the choice to select one of four button types: Button (Default): The default option, displays the button as usual. None: Hides the button entirely. Text: Treats the button as a link, allowing users to click the text to perform an action. Complete Box: Hides the button and makes the entire card clickable, enabling users to click anywhere on the card to perform an action.
- Text: This setting determines the text of the button.
- Link: This setting specifies the destination link for the button, where users will be directed after clicking the button.
- Open In New Window: By enabling this setting, a new tab will be opened when users click the button.
- Styling on Hover State: You can access settings to customize the text color and background color for buttons in the hover state. This customization enhances the dynamics of your webpage, creating a more interactive and visually appealing user experience.
Background Image
If you wish to use background image instead of background color for the card block. The option is available. You can apply multiple background images and configure how they will be displayed by adjust ‘Position X’, ‘Position Y’, ‘Size’, and ‘Repeat’ settings.
Mobile Friendly
The UBC Card Block is mobile friendly.
Accessibility
The UBC 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.
How to use the block on UBC CMS?
Navigate to your site’s Dashboard on UBC CMS and go to Plugins. Search for UBC Cards 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 UBC Card Block to insert it into your content.