Structure
Cards Component Guidelines
Information
Cards act similarly to accordions but are columned and can be used in a variety of ways as shown below. They should only be used with a maximum of 3x3 grid (3 rows & 3 columns). Cards can also be used in conjunction with text and image contents by specifying certain classes and can also be used with different column layouts. Examples provided below.
This particular component has a dependencies on the following:
- jQuery v2.2.4+
- Foundation Gridding System (packaged into Evolution)
By default, the component/plugin comes with accessibility options for Screenreaders such as ChromeVox enabled. This can be turned off using the plugin's settings. See the section 'Plugin Information' below for more information.
The accessibility option when tabbing through content will follow columns as opposed to rows. Titles/Caret Icons act as buttons in terms of accessibility and are separate to the content. Through plugin settings, you may enable/disable keybindings for accessibility (turned on by default). For example, if the title of a particular card is focused, the user may press either the 'Enter' or 'Space' keys to expand/collapse cards.
This Card plugin also has internal functions to equalize title and content height based on the tallest content height of each height. This can be toggled to either equalize by row or by the largest content altogether. Keep in mind that equalization is disregarded in mobile states.
To have cards automatically expanded upon DOM Ready event, please ensure that .card-open is applied to the .__mst_card element. This is to give content authors the ability to decide if the first row of cards should be expanded or collapsed cards.
Note that only the first row of cards can have their content expanded. Any other rows will automatically be collapsed on initialization of the plugin regardless of classes (.card-open) applied. For mobile initialization, it is the first card of any suite.
As a general rule of thumb, titles should not exceed 40 characters and content should not exceed 200 characters without Call-To-Action (CTA) and 150 characters with a Call-To-Action (CTA).
Evolution Version 3 uses Foundation v5.5.2. The gridding system documentation for Foundation v5.5.2 can be found at: https://get.foundation/sites/docs-v5/components/grid.html
3 Columned Cards
Information
This is a visual representation of a 3 columned layout with 2 rows of cards. You may add extra cards to each column by adding the relevant base HTML code.
The root element must be based on .row of Foundation's Gridding System (provided within Evolution Library). They are then containerised with a mixture of Foundation column classes such as .columns & .small-12 as well as Cards Plugin dependency class of .__mst_cards_column; which is the class that the plugin targets.
Visual Example
Two lines for a financial title
Few lines of copy to give the user context for the below action.
Two lines for a financial title
Few lines of copy to give the user context for the below action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut quam sit amet dit.
One line title
Few lines of copy to give the user context for the below action.
Two lines for a financial title
Since July 2019, you have received
$12,000
In quarterly payments
Two lines for a financial title
Since July 2019, you have received
$12,000
In quarterly payments
One line title
Few lines of copy to give the user context for the below action.
Code Usage
HTML
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action.
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut quam sit amet dit.
One line title
View account detailsFew lines of copy to give the user context for the below action.
Two lines for a financial title
Since July 2019, you have received
$12,000
In quarterly payments
Two lines for a financial title
Since July 2019, you have received
$12,000
In quarterly payments
One line title
View account detailsFew lines of copy to give the user context for the below action.
Javascript
$('.__mst_cards').__mstCards();
2 Columned Cards
Information
2 columned layouts are exactly the same as 3 columned layouts for cards. The only difference is that the .__mst_cards_column section will use different grid classes based on Foundation's gridding system. E.g. .columns .small-12 .medium-6 .large-6 as opposed to .columns .small-12 .medium-4 .large-4.
Visual Example
Two lines for a financial title
Few lines of copy to give the user context for the below action.
Two lines for a financial title
Few lines of copy to give the user context for the below action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut quam sit amet dit.
One line title
Few lines of copy to give the user context for the below action.
Two lines for a financial title
Since July 2019, you have received
$12,000
In quarterly payments
Code Usage
HTML
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action.
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut quam sit amet dit.
One line title
View account detailsFew lines of copy to give the user context for the below action.
Two lines for a financial title
Since July 2019, you have received
$12,000
In quarterly payments
Javascript
$('.__mst_cards').__mstCards();
Cards with Content (Text/Images)
Information
Cards can be used with different types of content such as text and images. The key difference between a column containing cards and a column containing content (text/images) are based on the column classes that are assigned. The following classes are the difference:
- .__mst_cards_column: Column class used for cards.
- .__mst_cards_column_content: Column class used for text/image content.
They can be mixed and matched based on the allowed rules/guidelines. Refer to the 'Component Guidelines' section above.
Content can be either left or right of the cards. This can be done by simply switching the order of the HTML code structure.
E.g. Having the .__mst_cards_column_content class before the .__mst_cards_column class.
Visual examples provided below are for reference only. Remove images or text content as required.
Visual Example: 2-Columns with Text Content (Right)
Two lines for a financial title
Few lines of copy to give the user context for the below action.
Two lines for a financial title
Few lines of copy to give the user context for the below action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut quam sit amet dit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code Usage (HTML)
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action.
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut quam sit amet dit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Visual Example: 2-Columns with Mixed Content (Left)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two lines for a financial title
Few lines of copy to give the user context for the below action.
Two lines for a financial title
Few lines of copy to give the user context for the below action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut quam sit amet dit.
Code Usage (HTML)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action.
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut quam sit amet dit.
Visual Example: 3-Columns with Image Content (Right)
Two lines for a financial title
Few lines of copy to give the user context for the below action.
One line title
Few lines of copy to give the user context for the below action.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Code Usage (HTML)
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action.
One line title
View account detailsFew lines of copy to give the user context for the below action.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Visual Example: 3-Columns with Mixed Content (Right)
Two lines for a financial title
Few lines of copy to give the user context for the below action.
Two lines for a financial title
Since July 2019, you have received
$12,000
In quarterly payments
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code Usage (HTML)
Two lines for a financial title
View account detailsFew lines of copy to give the user context for the below action.
Two lines for a financial title
Since July 2019, you have received
$12,000
In quarterly payments
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Selectable Option Cards
Information
The class __mst_selectable_cards MUST be assigned to the root element .row to enable the selectable component.
Icons can be customized by assigning the relevant class to the .__mst_card_title element according to the Mericon guide lines
Visual Example (2 Columns)
Code Usage (HTML)
Visual Example (3 Columns)
Code Usage (HTML)
Visual Example (4 Columns)
Code Usage (HTML)
Cards with Button (Icon/Text)
Information
The class __mst_button_cards MUST be assigned to the root element .row to enable the selectable component.
Visual Example (2 Columns)
Code Usage (HTML)
Visual Example (3 Columns)
Code Usage (HTML)
Visual Example (4 Columns)
Code Usage (HTML)
Plugin Information
Cards Plugin Options
Initialization of the plugin can be based off classes or IDs. If the initialization is based on a class then it will iterate through each of the selectors that are found within the DOM and initialize them separately.
Ensure that dependencies such as jQuery library has been loaded before initializing this plugin; otherwise it will throw an error stating that jQuery is required.
Both source and minified versions have been provided within the assets portion of this particular folder. Sizes are:
- mst_cards.js: 15KB
- mst_cards.min.js: 5KB
The Cards plugin has several options that can be used. These include the following:
- equalizeTitles: Whether or not to equalize titles. Default 'true'
- equalizeTitlesByRow: Whether or not to equalize titles. Default 'true'. Requires equalizeTitles to be set to 'true'
- equalizeContent: Whether or not to equalize content. Default 'true'
Note: this option will equalize content by rows and cannot be configured to equalize based on the heights content of all cards. - enableFocusableTitles: Adds tabindex to titles for accessibility. Default 'true'
- enableKeypressCards: Binds titles to detect keypress events ('Enter' & 'Space' keys) for accessibility. Default 'true'
- enableAccessibleVoice: Adds aria and title attributes where required to allow smooth operation with browser screen readers. Default 'true'
Note: This has only been tested with ChromeVox plugin for Google Chrome. - mobileBreakpoint: The stylesheet breakpoint that determines when to equalize titles & content. Default '768'
An example of code usage with these values below:
$('.__mst_cards').__mstCards({
equalizeTitles: true,
equalizeTitlesByRow: true,
equalizeContent: true,
enableFocusableTitles: true,
enableKeypressCards: true,
enableAccessibleVoice: true,
mobileBreakpoint: 768
});