Image cards
— 

Image cards are useful for organizing information into buckets. They commonly serve as quick ways to help users access information. 

Cards have 80px top and bottom padding. This applies for all breakpoint sizes.

Article cards
—

The article card component is used to display articles in the Health 101 page of the website and in ‘Suggested articles’ sections in various parts of the website.

 Article cards (continued)
—

The article card component appears in a variety of states. The hover/active state appears in desktops to show users that it is clickable when the user places their cursor over the card. Note the change in the spacing and overlay opacity betwen the elements within the card in the hover/active state.

Category carousels
—

Category carousels are used to display articles in the website. It uses a carousel function where users have the option to click on arrows to display more articles on the right or alternatively users can drag their cursor on desktop or swipe left and right on mobile.

 Category carousels continued
—

Category carousels are used to display articles in the website. It uses a carousel function where users have the option to click on arrows to display more articles on the right or alternatively users can drag their cursor on desktop or swipe left and right on mobile.

Articles List view
—

Articles may also be displayed as a list.

 Articles Tile view
—

Articles are displayed as image gallery tiles. They will be distributed equally in 2 columns taking up the full width of the page.

 Checkboxes
—

Checkboxes appear on entry forms, allowing users to select multiple items.