Skip to main content

Card controls

In the ever-evolving digital sphere, card controls serve as the backbone of content presentation within interfaces like DronaHQ. These controls, ranging from sleek and minimalistic designs to immersive and interactive showcases, redefine how information is shared and engaged with. Exploring these different card types opens doors to a world of creative possibilities, shaping the way we organize and interact with content online.

Types of Card control

Single User card

The Single User Card control is designed to display detailed information about a single user, including their name, contact details, and avatar. It offers a comprehensive view of individual user data.

Single User Card Preview
Binding Data Options

The Single User Card control accepts data in the form of a single object representing a user's information. Here's an example of the data bind format:

{
"fullname": "Maria Gerhold",
"email": "maria81@example.com",
"avatar": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team2050/content/app/images/public/Maria_T4j7j.jpg",
"_isSelected": false
}

Detailed Card

The Detailed Card control is a versatile tool designed to showcase extensive information or a comprehensive overview of a specific entity or item. It offers a more in-depth view, displaying multiple attributes or details in a structured manner.

Detailed Card Preview

Binding Data Options

The Detailed Card control accepts data in an array of objects, where each object represents a detailed card, containing various attributes and information.

[
{
"id": 1,
"name": "John Doe",
"age": 30,
"email": "johndoe@example.com",
"address": "123 Main St",
"phone": "+1234567890",
// ... (additional attributes)
},
// ... (additional card data)
]

Long card

The Long Card control is tailored to display extended information within a single card structure, accommodating more details without compromising the user experience. It is particularly useful for showcasing comprehensive data sets in a compact yet accessible format.

Long Card Preview

Binding Data Options

The Long Card control functions with data in an array of objects, each object representing a single card containing numerous attributes or information fields.

Long card with Actions

The Long Card with Action control provides an extended card view, enabling the display of detailed information along with specific action buttons for enhanced user interaction.

Long Card with Action Preview

Binding Data Options

This control operates with data structured in an array of objects, each object representing a card containing multiple attributes or information fields.

The Gallery Card control is designed to showcase multiple images or media files in a card-like format, providing users with an immersive visual experience.

Binding Data Options

The Gallery Card control accepts data structured in an array of objects, each representing an image or media file with relevant details.

[
{
"id": 1,
"title": "Nature's Beauty",
"description": "A stunning view of natural landscapes",
"image": "https://example.com/image1.jpg",
// ... (additional attributes)
},
// ... (additional card data)
]

Similar to Gallery Card but with the addition of the action buttons.

Gallery Card with action

News card

Useful to add news feeds to your apps with a quick preview of the news.

News Card

Compact Card

The Compact Card control is designed to display a set of compact cards containing information such as fullname, email, and avatars. Users can interact with these cards by selecting or performing actions.

Short Card

The Short Card control is a compact representation commonly used for business cards or brief user profiles. It displays essential information about individuals in a concise and easily consumable format.

Binding Data Options

The Short Card control accepts data in the form of a single object representing concise information about an individual. Here's an example of the data bind format:

{
"fullname": "Maria Gerhold",
"email": "maria81@example.com",
"avatar": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team2050/content/app/images/public/Maria_T4j7j.jpg",
"_isSelected": false
}

Properties

PropertyDescription
ThemeDefines the color scheme or border color of the detailed card.
LayoutOffers layout options for the card display.
Max WidthSpecifies the maximum width of the card.
SpacingDetermines the space between different elements within the card.
ColumnsDefines the number of columns in the card layout.

Display

PropertyDescription
HeadersAllows display options for headers within the card.
ImageControls the display of images within the card.
TitleSpecifies the title display settings.
Detailed ViewEnables the option to view detailed information.
Action ButtonsCustomizable buttons to perform specific actions.

Data

PropertyDescription
Font SizeSets the font size for displayed data.
Font WeightAdjusts the font weight of displayed text.
Font ColorCustomizes the font color for the card's text.
SpacingControls the spacing between various elements.
Visible ColumnsSpecifies the number of visible columns.
Fit to ScreenEnsures data fits within the card's view.

Pagination

PropertyDescription
AllowEnables or disables pagination within the card.

Control Outputs

The Detailed Card control generates detailed information about a selected entity, producing a comprehensive representation of the chosen data.

OutputDescription
detailedcardRepresents the detailed information displayed within the card.
detailedcard.PROPERTIES.SELECTEDCARDSRepresents the detailed information about the selected card's data, including fullname, email, avatar, etc.

Events

TriggerDescription
selection_changeTriggers when there is a change in the selected detailed card(s).
action1_clickTriggers when the first custom action button is clicked.