Skip to content

4.11 Card

Card component, an element that serves as a container for information, presenting a structure based on a template that includes a label, title, subtitle, description, and image, providing a visually appealing representation of data.

This component is flexible and can be extended to adapt to various presentation needs.

It allows the creation of attractive and easily understandable user interfaces by organizing information in a visually effective manner within extensible and customizable cards.

Attribute Default Value Type Description
Common id null String Unique identifier of the component. If it doesn't have an id, it is assigned with the nomenclature ${tag}${num}.
render true Boolean or JEXLExpression EL expression to evaluate if the component should be displayed.
onBeforeRender null String JS method to execute before the current component is rendered.
onAfterRender null String JS method that will be executed once the current component is rendered.
action null String Identifier of the action to perform when the user interacts with this component.
allowsPartialRestore false Boolean If the state of the current component should be restored when the user returns to the view.
label null String Label to be displayed in the header.
template null String Template. Possible values: card_template_1.
title null String Title of the card.
subtitle null String Subtitle of the card.
description null String Description of the card.
image null String or JEXLExpression Image associated with the card.
imagePosition null String Position of the image in relation to the text inside the card: Bottom, top, right, left.
expanded true Boolean Indicates whether it is expanded.
expandable true Boolean Indicates whether it can be expanded. 
<main name="Card" id="formCard" repo="pruebaRepo">
    <edit>
        <form>
            <card label="Label 1" template="card_template_1" title="Card 1" subtitle="Subtitle card 1" image="${'batman.jpg'}" imagePosition="left">
              <p name="description" value="Description 1"/>
             </card>
            <card label="Label 2" template="card_template_1" imagePosition="bottom">
              <p name="title" value="Card 2"/>
              <p name="subtitle" value="Subtitle card 2"/>
              <p name="description" value="Description 2"/>
              <image label="Imagen 1: " value="${'batman.jpg'}" readonly="true"/>
            </card>
            <card label="Label 3" template="card_template_1" title="Card 3" subtitle="Subtitle card 3" expandable="true" expanded="true" imagePosition="right">
              <p name="description" value="Description 3"/>
             </card>
            <card label="Label 4" template="card_template_1" title="Card 4" subtitle="Subtitle card 4" expandable="true" expanded="false">
              <p name="description" value="Description 4"/>
            </card>
        </form>
    </edit>
    <list name="Card">
    </list>
</main>

img.png