<templates:fancybox>
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:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox
ATTRIBUTES
EXAMPLES
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: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