Skip to main content




Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:

Card Sectioned

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Groups information in a small block organized with different sections for title, image and content that can be easily noticeable in the screen.

    Use the Card Sectioned pattern to group short pieces of information and highlight them on the screen.

    How to use the Card Sectioned UI Pattern

    1. In Service Studio, in the Toolbox, search for Card Sectioned.

      The Card Sectioned widget is displayed.

      If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

      a. Go to Module > Manage dependencies.

      b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

      c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

      d. Search for and select the element you want to add, and click Apply.

      e. In Service Studio, in the Toolbox, search for the widget again.

    2. From the Toolbox, drag the Card Sectioned widget into the Main Content area of your application's screen.

      By default, the Card Sectioned widget contains an Image, Title, Content, and Footer placeholder.

    3. Add your content to the placeholders.

      In this example we add an image, a title, some text, and a link.

    4. On the Properties tab, you can change the look and feel of the Card Sectioned widget, for example, the orientation, and padding properties.

    After following these steps and publishing the module, you can test the pattern in your app.


    Property Description
    UsePadding (Boolean): Optional If True, content has padding. This is the default. If False, the content has no padding.
    IsVertical (Boolean): Optional If True, the Card Sectioned pattern displays vertically. This is the default. If false, the pattern displays horizontally.
    ImagePadding (Boolean): Optional If True, a padding of 24px is applied to the image. This is the default. If False, no padding is applied to teh image.
    ExtendedClass (Text): Optional Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.


    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    • Was this article helpful?