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

Story

  • Design
  • Code
  • Props

The Story component adds a default style, formatting and spacing for a longer text with main focus on readability.

TODO: More information can be found in the typography documentation.

When to use

  • Utilize the Story component for long-form textual content where readability is a priority.
  • Apply this component to display stories, articles, or detailed explanations that require attention to text formatting and spacing for enhanced reader engagement.

When not to use

  • Avoid using the Story component for short text content or where text formatting and readability are not the primary concerns.
  • Do not use it for content that primarily requires interactive elements or multimedia integration.

Content

Readability

The Story component is designed to optimize the readability of long text content. Its default styling and spacing are tailored to ensure that extended text is easy to read and visually appealing.

Customization

While the component provides default styling, it also allows for customization through the className property, enabling the adaptation of the component to various design requirements.

Related

Text

On this page

  • Content
  • Readability
  • Customization
  • Related

References

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