Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps
OutSystems

Card

Groups information in a small block that is easily noticeable in the screen.

Use Cards to group small pieces of information and highlight them on the screen.

How to use

Drag the pattern to the screen and edit the content to match your requirements.

  1. Drag the Card pattern into the preview.

  2. Set the content you need in the placeholder.

  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

Change background-color

  1. Write the following classes in the ExtendedClass property of the card. background-yourcolor text-neutral-0 border-size-none

    The class text-neutral-0 is to set the text-color to white, in contrast with the new background. The border-size-none class is to remove the border.

  2. Publish and test.

Before:

After:

  • Was this article helpful?