LogoLogo
  • Getting Started
    • Overview
    • Download components
    • Installing Components
    • Using a component
    • lowcodera App Tokens
  • UI Components
    • lowcodera UI Assets
    • Button
    • Card
    • Date time picker
    • Dropdown Menu
    • Horizontal Navbar
    • Icon
    • PowerGrid
    • Progress Bar
    • TextBox
    • Vertical Navbar
  • Visualization Components
  • Area Chart
  • Bar Chart
  • Column Chart
  • Donut Chart
  • Heatmap Chart
  • Kanban Board
  • Swimlane
  • Line Chart
  • Mixed Chart
  • Pie Chart
  • Polar Chart
  • Radar Chart
  • Radial Chart
  • Strategic Roadmap
  • Scatter Chart
  • Timeline Chart
  • Properties Reference
    • UI Component Properties
    • Chart Component Properties
    • Navbar Schema
  • Page 1
Powered by GitBook
On this page
  • Purpose
  • Variations
  • Component Properties
  • Example
  • Card with Image
  • Card with Header
  • Card with Header

Was this helpful?

  1. UI Components

Card

lowcodera Card Component

PreviousButtonNextDate time picker

Last updated 3 years ago

Was this helpful?

Purpose

The lowcodera card component represents a common layout item in many modern design languages. This card component contains content and actions about a single subject and can work well on its own or within a Power Apps gallery. All properties on this card component support dynamic data binding.

Variations

There are several variations of card with different colors and configuration properties.

  • Card with Image

  • Card with Header

Component Properties

The properties below are the main ones which change this components appearance and behaviors.

Property

Description

Required

Accepted Values

ImageURL

Property to configure Image URL

X

String

ImagePosition

Property to configure Image Position in a card

X

Bottom

Header

Middle

Overlay

Top

BackgroundColor

Property to set background color for card component

X

String (HEX CODE in Upper Case)

HeaderText

Property to set header text for a card

X

String

HeaderFontColor

Property to set font color for header

X

String (HEX CODE in Upper Case)

TagText

Property to represent Tag Text for card

X

String

TagFontColor

Property to show Font Color for tag text

X

String

TagIcon

Property to show tag icon in a card

X

String

Title

Property to set Title for card

X

String

TitleFontColor

Property to set font color for Title

X

String (HEX CODE in Upper Case)

Description

Property to set Description for card

X

String

DescriptionFontColor

Property to set font color for description.

X

String (HEX CODE in Upper Case)

HorizontalAlignment

Property to set horizontal alighment for card title, description.

X

Center

Left

Right

Theme

Property to set Theme for card control.

X

Danger

Default

Info

Primary

Secondary

Success

Warning

Example

Card with Image

Card with Header

Card with Header

ImageURL property is to set as valid publically accessible URL (e.g. )

https://images.freeimages.com/images/large-previews/0d6/blue-flowers-with-macro-4-1400913.jpg