Table of contents
Presets
-
Preset: Article -
Preset: Article Blog -
Preset: Base -
Preset: Base Centered -
Preset: Base Inline -
Preset: Details -
Preset: Feature -
Preset: Profile -
Preset: Profile Centered -
Preset: Thumbnail
Examples
-
Example: Card Design Using Card Grid Options -
Example: Custom Card Designs Using Options -
Example: Custom Cards for Sign In
Preset: Article
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Article with advanced titles
Custom card title with inline formatters
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Custom card title with inline formatters
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Custom card title with inline formatters
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Article with custom columns sizes (4 per row)
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Article with footer buttons
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Preset: Article Blog
Article Blog with badges
Insurance
Article blog card titleRetirement
Article blog card titleInsurance
Article blog card titleArticle blog with custom columns sizes (4 per row)
Article blog with footer buttons
Preset: Base
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Base without icons
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Preset: Base Centered
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Base centered with custom columns sizes (1 per row)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in aliquam odio. Fusce sodales odio at orci faucibus tincidunt. Suspendisse leo justo, rutrum a feugiat sed, pulvinar nec erat. Fusce condimentum ornare metus, vel ornare augue consectetur id. Mauris vitae pellentesque lectus. Praesent id consequat dolor, et egestas elit. Aliquam pellentesque enim a dictum lacinia. Suspendisse dapibus massa dolor, vel bibendum mi feugiat ut. Nunc sodales tortor sed ornare iaculis.
Preset: Base Inline
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Base inline with a card spanning 2 columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in aliquam odio. Fusce sodales odio at orci faucibus tincidunt. Suspendisse leo justo, rutrum a feugiat sed, pulvinar nec erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Preset: Details
Lorem ipsum dolor sit amet, consectetur adipiscing elit
123 456-7890Lorem ipsum dolor sit amet, consectetur adipiscing elit
user@example.comLorem ipsum dolor sit amet, consectetur adipiscing elit
12345 Example Street
Cityville, Provincia
Details with a card spanning 2 columns
Phone
123 456-7890Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in aliquam odio.
-
Resources -
Forms -
FAQs
Preset: Feature
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Feature without images
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Feature with nested buttons
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Feature with lists
- Product A
- Product B
- Product C
- Specify
- Build
- Integrate
- Deliver
- Term
- Description
- Term
- Description
- Term
- Description
Feature with badges
Tools
CalculatorsLorem ipsum dolor sit amet, consectetur adipiscing elit
Tools
Find a providerLorem ipsum dolor sit amet, consectetur adipiscing elit
Forms
Claim formsLorem ipsum dolor sit amet, consectetur adipiscing elit
Preset: Profile
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Profile with nested reveals for more details
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in aliquam odio. Fusce sodales odio at orci faucibus tincidunt. Suspendisse leo justo, rutrum a feugiat sed, pulvinar nec erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in aliquam odio. Fusce sodales odio at orci faucibus tincidunt. Suspendisse leo justo, rutrum a feugiat sed, pulvinar nec erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in aliquam odio. Fusce sodales odio at orci faucibus tincidunt. Suspendisse leo justo, rutrum a feugiat sed, pulvinar nec erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in aliquam odio. Fusce sodales odio at orci faucibus tincidunt. Suspendisse leo justo, rutrum a feugiat sed, pulvinar nec erat.
Preset: Profile Centered
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Preset: Thumbnail
Suspendisse potenti. Donec tincidunt sit amet quam non venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur sit amet purus sit amet scelerisque.
Mauris eget cursus ligula. Sed ultricies ipsum felis, pharetra tristique ligula maximus tincidunt.
Proin vel lorem ac quam consectetur fringilla nec non massa.
Thumbnail with custom columns sizes (1 per row)
Suspendisse potenti. Donec tincidunt sit amet quam non venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur sit amet purus sit amet scelerisque.
Thumbnail with headings only (styled as CTA links)
Example: Card Design Using Card Grid Options
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example: Custom Card Designs Using Options
I am a card!
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Category
I am also a cardLorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Example: Custom Cards for Sign In
Sign in to GroupNet for plan members, GRS Access and My Canada Life at Work to manage your benefits and savings.
Manage your personal investments, savings and insurance all in one place.