Module

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

References

Storybook