List grid
Card grid
2 Column grid
3 Column grid
①Multiple card : Multiple contents in a card
②Grouped list : List view
③Singular content : Individual content
①Image + Text (divided) : In case of the background image has too many details to display text on top.
②Image & Text : In case of using the whole image as a full bleed background underneath the text.
③Image + Text : In case of locating title text or image captions below the image.
④Text only : In case of having more than 3 lines of bodycopy within the card.
⑤Clustered images + Text : The radius value of multiple card and singular contents are different.
⑥Text + Controller : It is recommended to locate text at the top left corner and on/off controller at the bottom right corner.
Thumbnails only
Inside of multiple cards
①Text only
②Thumbnail image list
③Container icon list
④2D icon list