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

Module

  • Design
  • Code
  • Props

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

Import statement

import { Module, ModuleBody, ModuleHeader, ModuleFooter } from "@wfp/react"

Usage

Expand code

Editable Example

import {
  Module,
  ModuleHeader,
  ModuleBody,
  ModuleFooter,
} from "@wfp/react";

<Module>
  <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>;

Dark example

Expand code

Editable Example

import {
  Module,
  ModuleHeader,
  ModuleBody,
  ModuleFooter,
} from "@wfp/react";

<Module dark>
  <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>;

Light example

Expand code

Editable Example

import {
  Module,
  ModuleHeader,
  ModuleBody,
  ModuleFooter,
} from "@wfp/react";

<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>;

With hover example

Expand code

Editable Example

import {
  Module,
  ModuleHeader,
  ModuleBody,
  ModuleFooter,
} from "@wfp/react";

<Module light withHover>
  <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>;

On this page

  • Usage
  • Dark example
  • Light example
  • With hover example

References

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