Components
Structure
Module

Module

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

References