Text Module

The Text module is one of the foundational components in Plan and Publish. It allows you to add and format text throughout your app, from page titles and descriptions to in-app instructions or labels. With flexible styling options and a responsive layout, the Text module helps you keep your design clean, consistent, and visually aligned with your app’s brand.

Written By Dorsa Arfa

Last updated 9 months ago

Adding the Text Module

To add the Text module:

  1. Click Add Items in the top navigation.

  2. In the New Items pane on the left, select Text.

  3. Drag and drop the module into the canvas.

Once placed, click on the module to open the Text Properties Panel.

Typography Settings

The Typography section controls the overall style and structure of the text. It offers both predefined and custom options.

  • Style: Choose from Title 1, Title 2, Title 3, Subtitle 1, Subtitle 2, Paragraph 1, and Paragraph 2.

  • Font: Select a font from the available list.

  • Font Weight: Set to bold, regular, or light depending on your design needs.

  • Font Size: Enter a size value between 1 and 999 pixels.

  • Line Height: Adjust spacing between lines.

  • Letter Spacing: Fine-tune spacing between characters.

  • Font Colour: Select from preset colours, grayscale, or use the colour picker to enter a custom HEX code.

Alignment & Text Case

Use these options to control how your text appears in the layout:

  • Alignment: Left, Centre, Right, or Justify

  • Case: None, Uppercase, Lowercase, or Sentence Case

  • Type: Choose between Single Line and Multi Line

  • Content: Enter your text directly into the Your Text field

These controls allow for full creative flexibility while keeping structure clean and standardised across screen sizes.

Text Background Colour

To emphasise or isolate text, apply a background fill.

  • Choose None or Solid

  • Select from default colours or create your own using the colour picker and HEX entry

  • Saved custom colours can be reused across modules

This is useful for drawing attention to key labels, alerts, or visual groupings within your layout.

Size Options

By default, the Text module uses Auto sizing, meaning it will grow with its content. For fixed layouts or tighter constraints, switch to Custom sizing.

  • Set Width and Height manually (range: 0 to 9999 px)

Custom sizing is especially helpful when placing text within structured layouts or within a fixed-height section.

Additional Design Properties

In addition to typography and layout, the Text module supports:

  • Spacing: Control padding and margin

  • Border: Add outlines with custom colour and thickness

  • Visibility: Show or hide based on logic or breakpoint

  • Background: Apply fills behind the full module block

These controls are consistent with all modules in PAP and allow for complete alignment with your app’s visual identity.

Use Cases

  • Section headers, titles, and descriptions

  • Instructional text inside forms or list items

  • Labels and notes in dashboards or user interfaces

  • Promotional content or call-to-action text blocks

The Text module supports all standard design and UX use cases, ensuring consistency across devices and screen sizes.