Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

Section

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Organizes the screen into different sections with accessibility. Can also be used with a Section Index to easily create anchors for each section.

    Use the Section to separate content into groups, easing visual organization.

    How to use

    Drag the Section to the screen and then add the title and content to the placeholders.

    1. Drag Section pattern into the preview.

    2. Set the content you need in the placeholders.

    3. Publish and test.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    ExtendedClass Add custom style classes to this Block. Text False none

    Layout and Classes

    Advanced Use Case

    Remove line below Title

    Write the following CSS in the CSS editor.

    css .section-header { border-bottom: none; padding-bottom: var(--space-none); }

    Before:

    After:

    Compatibility with other Patterns

    Works with Section-Index Pattern on the same screen to create navigable anchors.

    • Was this article helpful?