Skip to main content




Applies only to Traditional Web Apps



Card Sectioned

  • Edit
  • 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.

    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, direction and padding properties.

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


    Property Description
    Orientation (Orientation Identifier): Optional Sets the orientation of the card.


    • Blank - The content displays vertically. This is the default.
    • Entities.Orientation.Horizontal - The content is displayed horizontally.
    ImagePadding (Boolean): Optional If True, a padding of 24px is applied. This is the default. If False, no padding is applied.
    IsRight (Boolean): Optional If True, content is left aligned. If False, content is right aligned. This is the default. Note: This property is only applicable if the Orientation property is set to Horizontal.
    ExtendedClass (Text): Optional Add custom style classes to the Card Sectioned UI 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 Card Sectioned UI styles being applied.
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Card Sectioned UI styles being applied.
    • Was this article helpful?