<templates:card>
AJAX
Data
Forms
Layout
Logic
Navigation
Personalisation
Standard
Templates
DESCRIPTION
ATTRIBUTES
bGColor
cardSize
color
height
href
id
width
EXAMPLES
Basic Card Display
Regions
Third Party

<templates:card> </...>

Provide a flexible and extensible content container with multiple variants and options.

Related Controls

Content

any
Label for the team member.

Attributes

bGColor
string
Background Colour

Background Color of the Card.
cardSize
string
Card Size

Size (Width) of the Card. Options are SM, MD or LG.
color
string
Font Colour

Font (Text) Color of the Card.
height
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
href
string
Link

Link to be applied as an overlay to the Card.
id
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
width
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.

Examples

Basic Card Display

Multiple card display with different href links

HTML:

<templates:flexlayout style="justify-content: center; align-items: stretch;" preventwrap="preventwrap"> <templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)" cardsize="md" href="/services/services-1/"> <standard:image width="100%" maintainaspect="crop" height="207" src="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" /> <h2>Services 1</h2> <p>Cards are a place for small groups of content.</p> </templates:card> <templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)" cardsize="md" href="/services/services-2/"> <standard:image width="100%" maintainaspect="crop" height="207" src="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" /> <h2>Services 2</h2> <p>Cards are a place for small groups of content.</p> </templates:card> <templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)" cardsize="md" href="/services/services-3/"> <standard:image width="100%" maintainaspect="crop" height="207" src="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" /> <h2>Services 3</h2> <p>Cards are a place for small groups of content.</p> </templates:card> </templates:flexlayout>

Run Example