Banner
Last updated
What is Banner?
Banners display an actionable message used as a prominent way of communicating with your users.
- Appearance: Banners are used to display different types of messages and it’s important to differentiate their visual appearance based on the role they’re playing. If you’re using background colours for role differentiation, make sure there’s enough contrast ratio with the content according to the WCAG AA standard.
- Area for icons or images: Banners can supplement their message using a supporting icon or image. They shouldn’t be used instead of text content.
- Actions: Actions in banners should relate to its text and provide a way to react to the message sent to the user.
- Dismissible Action: Don’t overwhelm the user with banners on the page and include a dismissable action. That may be either a separate close button or one of the actions provided.
- Accessibility: If a banner dynamically appears on the page, it should be announced to the user by their assistive technology.
- Responsiveness: Banners should adapt to the viewport size. This usually means that they become full-width for mobile to save some space.
More in stage 9: Project Management
- Project Management
- Avatar
- Input Text
- Input Checkbox
- Badge
- Input Radio
- Button
- Input Switch
- Card
- List
- Carousel
- Loading Indicator
- Dropdown
- Modal
- Icon
- Tabs
- Select
- Toast
- Textarea
- Tooltip
- Component Catalog
- Documentation
- Code Style
- Unit Testing
- Accessibility Testing
- Semantic Versioning
- Release Strategy
- Commit Guidelines
- PR Templates
- Contribution Guidelines
- Roadmap
- Milestones
- Ticketing
- Component Analytics
- Logging
- Tooling Analytics
- Service and Health Metrics
- Community Meetings
- Communication Channel
- Open Hours
- FAQs
Banner: common questions
Can I learn Banner in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Banner in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Banner tutorial for beginners?
It is lesson 86 of 124 in the free Design System roadmap, in stage 9, Project Management. If you are new to Design System, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.