<templates:teammember>
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 templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember
ATTRIBUTES
EXAMPLES
templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<templates:teammember>` </...>

The team member element can be used for showcasing people / staff in your business.

Team member elements should be inside a parent <templates:flexlayout> container.

Related Controls

Content

any
The description of your 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.
- `displayPicture`
string
Display Picture Src

Source of the image to be used as a Display Picture.
- `displayPicturePosition`
string
Display Picture Position

Position for the Display Picture when cropping.
- `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') ?]).
- `name`
string
Name

Name of the Team Member.
- `role`
string
Role

String representing the Role or Job Title of the Team Memeber.
- `variant`
string
Variant

Name indicating which template variant to use. Template variants change the style and overall look of the template.
- `width`
string
Width

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

Examples

Basic Team Section

Display team members in a flex layout with profile pictures, names, roles and descriptions

HTML:

<templates:section> <h1 style="text-align: center;">Our Team</h1> <p><br /></p> <templates:flexlayout style="justify-content: center;"> <templates:teammember displaypicture="https://images.unsplash.com/photo-1525078961872-3001df219a7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=tinysrgb&w=400&ixid=eyJhcHBfaWQiOjY4ODV9&s=b1de0b1d8d72f7b57a7f4823d51aacb2" role="Role" name="Alice Fender" variant="Simple" style="margin: 25px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </templates:teammember> <templates:teammember displaypicture="https://images.unsplash.com/photo-1514632752825-5d1b2eac4990?q=85&crop=entropy&cs=tinysrgb&w=400&ixid=eyJhcHBfaWQiOjY4ODV9&s=a469fedd342892bc8224ebaa29293111" role="Role" name="John Deering" variant="Simple" style="margin: 25px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </templates:teammember> <templates:teammember displaypicture="https://images.unsplash.com/photo-1458071103673-6a6e4c4a3413?q=85&crop=entropy&cs=tinysrgb&w=400&ixid=eyJhcHBfaWQiOjY4ODV9&s=56b2b24e25b814fddd23eccd544d0237" role="Role" name="Anita Gibson" variant="Simple" style="margin: 25px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </templates:teammember> </templates:flexlayout> </templates:section>

Run Example

Compact Team Layout

Compact team member display suitable for smaller sections or sidebars

HTML:

<templates:section contentsize="sm"> <h2 style="text-align: center;">Core Team</h2> <templates:flexlayout style="justify-content: space-around; flex-wrap: wrap;"> <templates:teammember displaypicture="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=85&crop=entropy&cs=tinysrgb&w=300" role="Designer" name="Alex Kim" variant="Simple" style="margin: 15px; max-width: 200px; text-align: center;"> Director </templates:teammember> <templates:teammember displaypicture="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=85&crop=entropy&cs=tinysrgb&w=300" role="Developer" name="Lisa Park" variant="Simple" style="margin: 15px; max-width: 200px; text-align: center;"> CTO </templates:teammember> <templates:teammember displaypicture="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=85&crop=entropy&cs=tinysrgb&w=300" role="Analyst" name="Tom Wilson" variant="Simple" style="margin: 15px; max-width: 200px; text-align: center;"> CFO </templates:teammember> </templates:flexlayout> </templates:section>

Run Example