Examples

Use these examples as a starting point for forms, layouts, navigation, and more. All components follow the design system tokens and work with Ethiopian localization and accessibility requirements.

Forms

Form patterns for data entry and validation.

• FormsComplete form layouts and field groups
• InputText inputs with labels and validation
• SelectDropdowns and multi-select
• Checkbox & RadioCheckboxes and radio buttons
• TextareaMulti-line text input

Layout & cards

Layout patterns and card-based content.

• LayoutPage structure and grid
• CardsCard components and layouts

Navigation

Navigation and wayfinding patterns.

• NavigationHeader and main nav
• BreadcrumbBreadcrumb trails
• TabsTabbed content
• PaginationPage navigation

Feedback & overlay

Alerts, modals, and progress indicators.

• AlertsAlert and notification messages
• ModalModal dialogs
• ProgressProgress bars
• AccordionCollapsible sections

Data & search

Displaying data and search patterns.

• SummarySummary boxes and highlights
• BadgesBadges and tags
• AvatarAvatar and identity
• SearchSearch input and results

Browse all components

See the full list of components with live demos and code.