Cards, Blocks

Blocks are those little rectangles full of inclusive images and text that serve as entry points to more detailed information. They became almost a default option when it comes to balancing UI aesthetics with good usability. Because cards are convenient means of displaying content composed of different elements.
Actyvate
27 SEPTEMBER 2017
Buy for Impact
10 SEPTEMBER 2017
Grill or Chill
1 SEPTEMBER 2017
1. Design Guideline

1.1 Cards are called blocks in the MaGIC Website. Blocks are sorted by date of latest event. Blocks consist of three part

1.1.1 Picture container

1.1.2 Title

1.1.3 Date

1.1.1 Picture Container

Picture container consist of three part

1.1.1.1 Picture

Picture are placeholder image that represent the block content and context

1.1.1.2 Overlay

Overlay are use to contain amount of information user need to digest. Overlay will be change to full transparent on hover state. This will create the effect of highlighting/focus by the user.

1.1.1.3 Gnome

Gnome is a vertical or horizontal line that consist of MaGIC branding color. There are variations of size and color arrangement gnome.

1.1.2 Title

Title of the event

1.1.3 Date

Date label are using Universal full date/time pattern which corresponds to dd MM YYYY

2. Implementation Notes

No content has been added for this component.

3. Reference

No content has been added for this component.