BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Actions
      • Overview
      • Button
      • ContextMenu
      • Link
    • Controls
      • Overview
      • Checkbox
      • Tag
      • Toggle
    • Forms
      • Overview
      • DatePicker
      • FileUploader
      • Input
      • NumberInput
      • RadioButton
      • Search
      • Select
      • Slider
      • TextArea
      • TextInput
    • Hooks
      • useIsomorphicLayoutEffect
      • useMediaQuery
      • useSettings
    • Navigation
      • Overview
      • AnchorNavigation
      • BannerNavigation
      • Breadcrumb
      • Footer
      • InfoBar
      • MainNavigation
      • SecondaryNavigation
      • StepNavigation
      • SubNavigation
    • Overlay
      • Overview
      • Credits
      • Modal
      • ModalWrapper
      • Notification
      • Tooltip
    • Structure
      • Overview
      • Accordion
      • AuthLayout
      • Avatar
      • Callout
      • Card
      • ContentSwitcher
      • Empty
      • Hero
      • InlineLoading
      • Item
      • List
      • Loading
      • mdxComponents
      • Module
      • Pagination
      • ReadMore
      • Story
      • Table
      • Tabs
      • Text
      • Unit
      • User
      • WFPCoreProvider
      • Wrapper
Components
Structure

Module

  • Design
  • Code
  • Props

Modules are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Light version

Use the light version of the Module when you want to use it on a white background.

Expand code

Editable Example

<Module light>
  <ModuleHeader>Module example</ModuleHeader>
  <ModuleBody>
    <p>
      Lorem Ipsum is dummy text of the printing and
      typesetting industry. Lorem Ipsum has been the
      industry’s standard dummy text ever since the
      1500s, when an unknown printer took a galley of
      type and scrambled it to make a type specimen
      book.
    </p>
  </ModuleBody>
  <ModuleFooter>Module footer</ModuleFooter>
</Module>;

When to use

  • Contained: A Module is identifiable as a single, contained unit.
  • Independent: A Module can stand alone, without relying on surrounding elements for context.
  • Individual: A card cannot merge with another card, or divide into multiple cards. Put the name in the top left corner, align controls or actions to the top right corner of the Module and place the information in the content. The ModuleFooter can be used to show additional functionality like sharing or exporting. Using Modules has additional benefits of flexibility when it comes to responsive design.

When not to use

  • Default Module on white background: Avoid using the default Module with white background. Use the light blue background or the light Module instead.

Reference

  • Material Design about Cards
  • Elevation in Material UI

On this page

  • Light version
  • Reference

References

  • Storybook
Storybook
Figma library
Contact us
2025 © World Food Programme