templates:row
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column 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 templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row
ATTRIBUTES
EXAMPLES
templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<templates:row> </...>

A layout container which arranges child column elements horizontally.

Oncord rows are based on a system of 12 columns, and can be used to create a variety of layouts. The width of each column is determined by the number of units it spans.

A row of three equal width columns would be created by adding three columns with a width attribute of 4. The sum of column widths in a given row should always add to 12 to maintain a consistent layout.

Rows in Oncord are responsive, and will automatically stack columns on mobile.

Content

Row must contain at least 1 column tag.

Attributes

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') ?]).
reverseOrderOnMobile
bool
Reverse Order on Mobile

When set to true, reorders the columns in the row so that the first column is on the bottom on mobile.
verticalAlignColumns
string
Vertical Align Columns

Used to align columns within the row vertically. Accepts same values as CSS align-items

Examples

Simple Row

Demonstrates a basic three column layout. Note how the sum of column widths is 12.

HTML:

<templates:row> <templates:column width="4">Column One</templates:column> <templates:column width="4">Column Two</templates:column> <templates:column width="4">Column Three</templates:column> </templates:row>

Run Example