ReadMore

The Collapsible component provides the same show/hide functionality as a dedicated ReadMore component. It allows content to be toggled based on user interaction, which is the core behavior needed for read-more patterns.

This pattern can be implemented by chunking text based on character or word count, and conditionally rendering the "Read more" button based on content length. This approach achieves a similar user experience without needing a dedicated ReadMore component.

Search

Search functionality is a perfect example of <InputGroup> usage, combining input fields with icons, buttons, and other addons.

InputGroup is highly flexible and supports various configurations. Explore additional examples in the detailed documentation.

User

The User component is essentially a combination of an avatar and text content. <Item> provides a structured way to display an image alongside content, making it an ideal fit for user profiles.

For more details, check the documentation for each component:

• Avatar
• Item

NumberInput

Numeric inputs can be implemented in multiple ways. The first example demonstrates a basic number input, while the second implements manual increment/decrement controls. Both approaches are valid and can be chosen based on your application's specific requirements.

For additional features like validation, error handling, or custom styling, integrate the input with the <Field/> component to create a more robust and user-friendly number input experience.

Hero

A hero section is often unique to each application, so there isn't a one-size-fits-all component for it. However, you can easily create hero sections using a combination of layout components, typography, and media elements.

Here are a few variations that can be built using these UI-Kit components:

• Card
• AspectRatio
• Item

PreviewCode

Emergency Food Assistance in Crisis Areas

Supporting families with food, nutrition, and resilience programs where needs are highest.

PreviewCode

Building Resilience Through Food Security

We empower communities to overcome food insecurity by providing emergency assistance during crises and building long-term resilience programs.Our approach combines immediate relief with sustainable solutions, helping people recover and thrive.

Unit

For numeric display formatting, use the browsers Intl API.

All examples in this section are based on Intl formatting primitives. See the MDN overview for Intl.NumberFormat.

This approach keeps formatting logic explicit, locale-aware, and easy to test.

Currency

Use style: "currency" with the target currency code. To check available ISO currency codes, see MDN: Intl.supportedValuesOf("currency").

Numbers

Use plain decimal formatting for grouped thousands and controlled precision. For grouping, notation, and precision options, see MDN: digit and notation options.

Metric systems

Use style: "unit" with the metric unit you need.

Percentages

Use style: "percent" and pass decimal input values (for example 0.42 -> 42%).

For form-related use cases, keep the raw numeric value in state and apply Intl formatting only when rendering labels, summaries, or read-only values.