Component Overview
Component reference is helpful for you to implement layouts, elements, and components, using our CSS class and modifiers. Each page provides you with comprehensive usage instructions, examples, and guidelines.
![footer image](/assets/img/components-overview/footer.png)
The footer contains supporting information for your service at the bottom of your website. All .gov.kh digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement, and the terms of use.
![main-navigation image](/assets/img/components-overview/main-navigation.png)
This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.
![side-navigation image](/assets/img/components-overview/side-navigation.png)
The side navigation is used to display a list of links to move between pages within a related category. It is used as a secondary form of navigation where the primary navigation is located hierarchically above the page frame.
![accordion image](/assets/img/components-overview/accordion.png)
![alert image](/assets/img/components-overview/alert.png)
![badge image](/assets/img/components-overview/badge.png)
Badges can be used to highlight important bits of information such as labels, notifications, and status.
![breadcrumb image](/assets/img/components-overview/breadcrumb.png)
Breadcrumbs help users navigate and understand where they are on the current website or service.
![button image](/assets/img/components-overview/button.png)
Buttons communicate actions that users can take throughout your portal, which can be used in places such as modals, forms, and cards.
![card image](/assets/img/components-overview/card.png)
Cards can be used for headers and footers, a wide variety of content, and contain contextual background colors and images.
![checkbox image](/assets/img/components-overview/checkbox.png)
This component is used when you require users to select multiple items from a list.
![combo-box image](/assets/img/components-overview/combo-box.png)
This component is used when you require users to make one or more selections from a list.
![file-upload image](/assets/img/components-overview/file-upload.png)
![modal image](/assets/img/components-overview/modal.png)
The modal component inform users about a specific task and may contain critical information which users then have to make a decision. E.g Accepting the T&Cs during signup
![pagination image](/assets/img/components-overview/pagination.png)
The pagination component is used to display a list of page numbers for your users, so that they can navigate to the next or previous page.
![progress-bar image](/assets/img/components-overview/progress-bar.png)
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
![quantity-toggle image](/assets/img/components-overview/quantity-toggle.png)
The quantity toggle component is used to increase or decrease an incremental venue, usually best used when the user needs to enter or adjust the quantity of a selected item.
![radio-button image](/assets/img/components-overview/radio-button.png)
Radio buttons allow the user to select one option from a set while seeing all available options.
![stepper image](/assets/img/components-overview/stepper.png)
![table image](/assets/img/components-overview/table.png)
![tabs image](/assets/img/components-overview/tabs.png)
Tabs are useful for organizing and presenting different sections of content or information within a page.
![text-area image](/assets/img/components-overview/text-area.png)
![text-input image](/assets/img/components-overview/text-input.png)
Text inputs allow your users to enter letters, numbers, and symbols on a single line.
![toast image](/assets/img/components-overview/toast.png)
A toast notification is a lightweight popup message that appears temporarily over the main interface to provide brief feedback, notifications, or error message to the user.
![tooltip image](/assets/img/components-overview/tooltip.png)
Tooltips display more information when users hover over, focus on, or interact with an element.