For creating content that requires adding more than one at a time. They are designed to be compact and flow in a single row when space allows. They are a visual combination of rows and columns from Tables and the flexibility of Grid.

Note: Add your own CSS classes and styling to set a max-width on a repeater-cell to limit input width. By default, each repeater--cell will flex to fill the repeater width.

Basic repeater classes include:

• .repeaters - container for repeater element. Should surround foreach statement.
• .repeaters--striped - adds backround color to odd rows. Should be applied to .repeaters
• .repeaters--reverse-striped - adds backround color to even rows. Should be applied to .repeaters
• .repeaters--hover - adds hover effect to each row. Should be applied to .repeaters
• .repeaters--counter - adds numbers to beginning of each row. Should be applied to .repeaters
• .repeater--slim - narrow padding and centered alignment. Should be applied to .repeaters
• .repeater--header - header row (i.e. table header for column labels). Should be placed within .repeaters, above .repeater and outside of loop
• .repeater--footer - footer row (i.e. table footer for things like totals). Should be placed within .repeaters, below .repeater and outside of loop
• .repeater - element to be repeated (i.e. row).
• .repeater--cell - column
• .repeater--cell--xxs through .repeater--cell--xxl - column breakpoints. Should be applied to .repeater--cell
• .repeater--last-cell--xxs through .repeater--last-cell--xxl. Should be applied to .repeater--cell

File upload repeater classes, in addition to the basic classes above, include:

• .repeater--file-upload - should be applied to .repeater
• .repeater--file-upload--cell - should be applied to .repeater--cell
• .repeater--file-upload--input-cell - should be applied to .repeater--cell that is meant to contain the file upload input.
• .repeater--file-upload--label-cell - should be applied to .repeater--cell that is meant to contain the field label.
• .repeater--file-upload--label - container class for field label
• .repeater--file-upload--inner-cell - container class for file input that acts as a column
• .repeater--file-upload--template-cell - container class for template button that acts as a column

Column and alignment specific classes, in addition to the basic classes above, include:

• .repeater--top - aligns cell content to top of cell. Can be applied to .repeater or .repeaters
• .repeater--middle - aligns cell content to middle of cell. Can be applied to .repeater or .repeaters
• .repeater--cell--auto - sets width of cell using flexbox to auto (width of cell content). Should be applied to .repeater--cell
• .repeater--cell--auto--xxs through .repeater--cell--auto--xxl - auto width column breakpoints. Should be applied to .repeater--cell
• .repeater--actions-cell - applied to column for action buttons. Should be applied to .repeater--cell
• .repeater--actions-cell--auto - sets width of cell using flexbox to auto (width of cell content). Should be applied to .repeater--actions-cell
• .repeater--actions-cell--auto--xxs through .repeater--actions-cell--auto--xxl - auto width action button column breakpoints. Should be applied to .repeater--actions-cell
• .repeater--actions-cell--header - applied to header column for action buttons (if exists) for minimum width of column. Should be applied to .repeater--actions-cell in .repeater--header

HTML

As of yet, there is no repeater atom. Below is an example of the HTML structure needed for repeaters. A footer will be coming soon to the examples.

<div class="repeaters repeaters--bordered repeaters--striped repeaters--hover margin--off" id="repeater">
	<!-- ko foreach: repeatingItems -->
	<div class="repeater--header margin--off display--none display--flex--sm">
		<div class="repeater--cell repeater--cell--sm margin--off">
			@Html.LabelAtom("", "", "Person", customClass: "label")
		</div>
		<div class="repeater--cell repeater--cell--xxs repeater--last-cell--xxs repeater--cell--sm margin--off pick-a-date">
			@Html.LabelAtom("", "", "Date", customClass: "label margin-top--sibling--smallest")
		</div>
		<div class="repeater--cell repeater--cell--xxs repeater--last-cell--xxs repeater--cell--sm margin--off amount">
			@Html.LabelAtom("", "", "Amount", customClass: "label margin-top--sibling--smallest")
		</div>
		<div class="repeater--cell repeater--cell--xs repeater--last-cell--xs margin--off">
			@Html.LabelAtom("", "", "Comment", customClass: "label margin-top--sibling--smallest")
		</div>
		<div class="repeater--cell repeater--last-cell repeater--cell--lg repeater--last-cell--lg display--none display--flex--lg margin--off">
		</div>
	</div>
	<div class="repeater margin--off">
		<div class="repeater--cell repeater--cell--sm margin--off">
			<label class="display--none--sm label font-size--small margin-top--sibling--smallest" for="repeater-find-a-person">Select A Person</label>
			<select class="selectize" id="repeater-find-a-person">
				<option value="">Select a person...</option>
				<option value="1">AJ Kiefner</option>
				<option value="2">Brian Renew</option>
				<option value="3">Britton Karon</option>
				<option value="4">Christopher Karlo</option>
				<option value="5">Danielle Ferguson</option>
				<option value="6">Donald Bickel</option>
				<option value="7">Jason Vogel</option>
				<option value="8">Kyle Jones</option>
				<option value="9">Matt Condor</option>
				<option value="10">Melissa Miller</option>
				<option value="11">Ryan Teneyck</option>
				<option value="12">Sherri Beeman</option>
				<option value="13">Susan Howell</option>
				<option value="15">Whitney Gainer</option>
				<option value="16">Zachary Winnie</option>
			</select>
		</div>
		<div class="repeater--cell repeater--cell--xxs repeater--last-cell--xxs repeater--cell--sm margin--off pick-a-date">
			<label class="display--none--sm label font-size--small margin-top--sibling--smallest" for="repeater-date">Select A Date</label>
			<input class="input flatpickr" type="text" placeholder="Select date..." id="repeater-date" />
		</div>
		<div class="repeater--cell repeater--cell--xxs repeater--last-cell--xxs repeater--cell--sm margin--off amount">
			<label class="display--none--sm label font-size--small margin-top--sibling--smallest" for="repeater-amount">Amount</label>
			<div class="input-group margin--off">
				<div class="input-group--icon">$</div>
				<div class="input-group--input margin--off">
					<input class="input" type="number" placeholder="Amount..." min="0.00" step="0.01" id="repeater-amount" />
				</div>
			</div>
		</div>
		<div class="repeater--cell repeater--cell--xs repeater--last-cell--xs margin--off">
			<label class="display--none--sm label font-size--small margin-top--sibling--smallest" for="repeater-comment">Comment</label>
			<input class="input" type="text" placeholder="Comment..." id="repeater-comment" />
		</div>
		<div class="repeater--cell repeater--last-cell repeater--cell--lg repeater--last-cell--lg margin--off">
			<button type="button" class="button button--link--error-color delete">
				@Html.Partial("~/Views/Shared/Icons/_delete.cshtml") Delete
			</button>
			<button type="button" class="button button--link--secondary-color add">
				@Html.Partial("~/Views/Shared/Icons/_add.cshtml") Add Another
			</button>
		</div>
	</div>
	<!-- /ko -->
</div>
					

NOTE: Do NOT apply foreach statement directly to .repeater (i.e. via data-bind), as this strips necessary classes that should be repeated for each row.
Use comment method instead (i.e. <!-- ko foreach: repeatingItems --><div class="repeater">...</div><!-- /ko -->)

NOTE: When hiding the delete button based on row numbers, manually using Knockout so that there is always one row that can't be deleted, do NOT apply to .repeater--cell but rather the button. Applying the if statement to the column will cause a jumping effect when adding rows that cause the button to show/hide and will affect spacing of last column.

JS

An example of what the JS would look like for a repeater is coming soon.