Highlight Box

Some definitions are not familiar to everyone. Some content may be repetitive and can be housed in a page, but needs quick linking with brief description from another. For these opportunities, use Inline Highlights to give your audience a richer reading experience.
1. Design Guideline

Use a modal when you want users to focus on a specific task within the context of the original page.

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).

Inline Highlights

Some definitions are not familiar to everyone. Some content may be repetitive and can be housed in a page, but needs quick linking with brief description from another. For these opportunities, use Inline Highlights to give your audience a richer reading experience.

Heading 4

MaGIC Affiliate Program (MAfP) is an online platform that connects aspiring entrepreneurs with quality training providers. MAfP programs will run both as workshops and courses for entrepreneurs. In line with the launch of MAfP, MaGIC will be conducting several preview sessions (for FREE) which start on the 17th of February until end mid April. Read More

2. Implementation Notes

No content has been added for this component.

3. Reference

No content has been added for this component.