Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

CardBackground

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Similar to a Card but allows you to define a background image that blends in with the content.

    Use a Card Background to group short pieces of information and highlight them on the screen while providing additional relavance by using a background image.

    How to use

    Add content to the placeholder and set the background image. Alternatively, in the parameters, you can define a background color that overlays the image, the content's position and a minimum height for the card.

    1. Drag the CardBackground pattern into the preview.

    2. Set the Input Parameters to extend the default values.

    3. Publish and test.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    Color Set the backgound color. Color Identifier False Entities.Color.Transparent
    Position Set the position around the widget element. PositionExtended Identifier False none
    Height Set the height of the Card, in pixels. Content will be vertically aligned by default. Integer False 300
    ExtendedClass Add custom style classes to this Block. Text False none

    Layout and Classes

    CSS Selectors

    Element CSS Class Description
    .card-background-content .bottom-center Vertically aligns the content to Bottom and Horizontally align it to Center.
    .card-background-content .bottom-left Vertically aligns the content to Bottom and Horizontally align it to Left.
    .card-background-content .bottom-right Vertically aligns the content to Bottom and Horizontally align it to Right.
    .card-background-content .center Vertically aligns the content to Center and Horizontally align it to Center.
    .card-background-content .center-left Vertically aligns the content to Center and Horizontally align it to Left.
    .card-background-contente .center-right Vertically aligns the content to Center and Horizontally align it to Right.
    .card-background-content .top-center Vertically aligns the content to Top and Horizontally align it to Center.
    .card-background-content .top-left Vertically aligns the content to Top and Horizontally align it to Left.
    .card-background-content .top-right Vertically aligns the content to Top and Horizontally align it to Right.

    Advanced Use Case

    Add a new style to the Counter pattern

    1. Drag the Counter pattern into the preview.

    2. Set the Input Parameters to the following values:

      • Color: Entities.Color.Neutral10
      • Position: Entities.PositionExtended.BottomCenter
      • Height: 400
      • ExtendedClass: shadow-xl

    3. Add a text widget into the Content placeholder and set the Style Classes property to heading4 text-neutral-0.

    4. Drag an image to the BackgroundImage placeholder.

    5. Publish and test.

    Notes

    The object-fit property is not supported in Internet Explorer.

    • Was this article helpful?