<templates:fancybox>
AJAX
Data
Forms
Layout
Logic
Navigation
Personalisation
Standard
Templates
ATTRIBUTES
EXAMPLES
Regions
Third Party

<templates:fancybox> </...>

A template for displaying small chunks of information with some design flair.

Related Controls

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.
heading
string
Heading

Heading / Title of the Fancy Box
image
string
Image Src

Source of the image to be used.
image-position
string
Image position

Position for the image when cropping.
variant
string
Variant

Name indicating which template variant to use.

Examples

Basic Fancy Box

Display a Flex Layout with Fancy Box using Accent variant

HTML:

<templates:flexlayout style="justify-content: center; align-items: stretch;"> <templates:fancybox image="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" style="margin: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)" heading="Heading" bgcolor="#ffffff" variant="Accent"> Add your content here. </templates:fancybox> <templates:fancybox image="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" style="margin: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)" heading="Heading" bgcolor="#ffffff" variant="Accent"> Add your content here. </templates:fancybox> <templates:fancybox image="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" style="margin: 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)" heading="Heading" bgcolor="#ffffff" variant="Accent"> Add your content here. </templates:fancybox> </templates:flexlayout>

Run Example