Button Primary

The primary button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Remove My Account” and “Cancel” button. The “Remove My Account” is the primary action.

Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance for this component.

Button Secondary

The base and neutral buttons are used most frequently and can be used multiple times per feature. Use these buttons when the actions are secondary importance to the content surrounding it, such as in the actions ribbon in a page header.

Inline Link

Use a link when you’re navigating to another place, such as: a "view all" page, "users" profile, a page "skip link" etc.

Buttons should be used in situations where users might need to:

1. Submit a form
2. Begin a new task
3. Trigger a new UI element to appear on the page
4. Specify a new or next step in a process

The elements for buttons and links describe a very specific type of action that is going to be taken when they are used. It is important we know when to use which, as the distinction matters:

1. Use a link when you’re navigating to another place, such as: a "view all" page, "user" profile, a page "skip link" etc.
   
2. Use buttons when you are performing an action, such as: "submit," "merge," "create new," "upload," etc.
   
3. If pressing a button results in a new URL, or the resultant UI makes sense as "a new browser tab", that's probably always a link. Everything else is a button.

Blocks are sorted by date of latest event. Blocks consist of three part

1. Picture container
   • Picture - Picture are placeholder image that represent the block content and context
   • 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.
   • Gnome - Gnome is a vertical or horizontal line that consist of MaGIC branding color. There are variations of size and color arrangement gnome.
2. Title
   • Title of the event
     
3. Date
   • Date label are using Universal full date/time pattern which corresponds to dd MM YYYY
     

Cards are a flexible rectangles that can contain a lot of small components to create unique component. Cards are viewed in grid. Consider designing it as minimal as possible. Cards consist of three part

1. Header
   • Header usually contains primary information such as headings for title, subtitle, avatar image of the cards.
2. Body
   • Body stores secondary information such as tags and short descriptions
     
3. Footer
   • Element footer is where we place low priority information.
     

A panel is typically used to provide supplemental information or form inputs that relate to your primary canvas.

The panel should take up 50% of the height of its parent container. In most cases, that would be the viewport or main stage of your application.

Panels are broken into three sections: the header, body, and footer.

1. Header
   • Header - Includes the title and an optional tagline. The title reflects the button text that triggered it. The tagline can contain links, or the entire tagline can be a link. Unlike Modal, panel header does not come with unique color to represent any visual meaning.
2. Body
   • You can have any type of content: forms, text, videos, and other media. For a directional panel, you can add a step indicator to indicate the user’s progress
     
3. Footer
   • Contains the navigational and action buttons. Action buttons, such as Save, Close, Delete, are on the right. Place the primary button—the one that guides the user toward the default action on the far right. For a directional modal, like a wizard, place the Next and Back navigation buttons on the opposite sides (left for Back and right for Next).
     

Modals are broken into three sections: the header, body, and footer.

1. Header
   • Includes the title and an optional tagline. The title reflects the button text that triggered it. The tagline can contain links, or the entire tagline can be a link
2. Body
   • You can have any type of content: forms, text, videos, and other media. For a directional modal, you can add a step indicator to indicate the user’s progress
     
3. Footer
   • Contains the navigational and action buttons. Action buttons, such as Save, Close, Delete, are on the right. Place the primary button—the one that guides the user toward the default action on the far right. For a directional modal, like a wizard, place the Next and Back navigation buttons on the opposite sides (left for Back and right for Next).
     

Alert Destruct

Alert Success

Certain colors have inherent meaning for a large majority of users, although we recognize that cultural differences are plentiful. For example, we use red (crimson) to communicate an error, green (medium sea green) to indicate success, yellow to indicate warning and blue (cadet blue) for general information

Alert Primary

Alert/dialog box contains two part

1. Content
   • Includes the title and an optional tagline. The title reflects the button text that triggered it. The tagline can contain links, or the entire tagline can be a link
2. Action button
   • You can have any type of content: forms, text, videos, and other media. For a directional modal, you can add a step indicator to indicate the user’s progress
     

Alert Warning

There are three main part of an activity timeline.

1. Date label
   • Date label are using Universal full date/time pattern which corresponds to dd MM YYYY, DD
   • Activity timeline are sorted by latest entry first.
     
2. Connector. Connector consist of;
   • Top cap - This element indicates the latest point of activity of a particular date
     
   • Success circle, pending circle/ cancel circle - This element indicate passed activity with a solid green circle and indicate upcoming activity with a green stroked circle.
     
   • Body line - This element indicate the content area for the particular activity.
     
3. Content
   • Content are generated dynamically. As for design the content can be generate using the wapi panel