Skip to main content

Container

A responsive container component that adjusts padding based on screen size and safe area insets.

github
View source code
figma
View design
import { Container } from '@uhg-abyss/mobile';

The Container adjusts its padding based on the following rules:

  • Small Screens (< 480px): Minimum padding of 16px or the safe area inset, whichever is larger.
  • Medium Screens (480px - 1023px): Minimum padding of 44px or the safe area inset, whichever is larger.
  • Large Screens (> 1024px): Padding is calculated dynamically based on the screen width and safe area insets.

Usage​

Container Props​

Name
Type
RequiredDescription
children
string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined
Content rendered inside the container.
Table of Contents