templates:card
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card
DESCRIPTION
ATTRIBUTES
bGColor
cardSize
color
height
href
id
width
EXAMPLES
Basic Card Display
templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<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