<section class="f-section">
	<h3 class="f-example-title">Primary</h3>
	<div class="f-example">
		<button type="button" class="ds-btn ds-btn-primary" id="phantom-ds-btn-primary">Primary</button>
		<button type="button" class="ds-btn ds-btn-primary ds-active" id="phantom-ds-btn-primary-active">Hover</button>
		<button type="button" class="ds-btn ds-btn-primary" id="phantom-ds-btn-primary-disabled" disabled>Disabled</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary&quot;>Primary&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-active&quot;>Hover&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary&quot; disabled>Disabled&lt;/button>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Outline</h3>
	<div class="f-example">
		<button type="button" class="ds-btn ds-btn-primary-outline" id="phantom-ds-btn-outline">Outline</button>
		<button type="button" class="ds-btn ds-btn-primary-outline ds-active" id="phantom-ds-btn-outline-active">Hover</button>
		<button type="button" class="ds-btn ds-btn-primary-outline" id="phantom-ds-btn-outline-disabled" disabled>Disabled</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary-outline&quot;>Outline&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary-outline ds-active&quot;>Hover&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary-outline&quot; disabled>Disabled&lt;/button>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Flat</h3>
	<div class="f-example">
		<button type="button" class="ds-btn ds-btn-flat" id="phantom-ds-btn-flat">Flat</button>
		<button type="button" class="ds-btn ds-btn-flat ds-active" id="phantom-ds-btn-flat-active">Hover</button>
		<button type="button" class="ds-btn ds-btn-flat" id="phantom-ds-btn-flat-disabled" disabled>Disabled</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-flat&quot;>Flat&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-flat ds-active&quot;>Hover&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-flat&quot; disabled>Disabled&lt;/button>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Text</h3>
	<div class="f-example">
		<button type="button" class="ds-btn ds-btn-link" id="phantom-ds-btn-link">Text</button>
		<button type="button" class="ds-btn ds-btn-link ds-active" id="phantom-ds-btn-link-active">Hover</button>
		<button type="button" class="ds-btn ds-btn-link" id="phantom-ds-btn-link-disabled" disabled>Disabled</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-link&quot;>Text&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-link ds-active&quot;>Hover&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-link&quot; disabled>Disabled&lt;/button>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Large</h3>
	<div class="f-example">
		<button type="button" class="ds-btn ds-btn-primary ds-btn-lg" id="phantom-ds-btn-lg">Large</button>
		<button type="button" class="ds-btn ds-btn-primary ds-btn-lg ds-active" id="phantom-ds-btn-lg-active">Hover</button>
		<button type="button" class="ds-btn ds-btn-primary ds-btn-lg" id="phantom-ds-btn-lg-disabled" disabled>Disabled</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-lg&quot;>Large&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-lg ds-active&quot;>Hover&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-lg&quot; disabled>Disabled&lt;/button>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Small</h3>
	<div class="f-example">
		<button type="button" class="ds-btn ds-btn-primary ds-btn-sm" id="phantom-ds-btn-sm">Small</button>
		<button type="button" class="ds-btn ds-btn-primary ds-btn-sm ds-active" id="phantom-ds-btn-sm-active">Hover</button>
		<button type="button" class="ds-btn ds-btn-primary ds-btn-sm" id="phantom-ds-btn-sm-disabled" disabled>Disabled</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-sm&quot;>Small&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-sm ds-active&quot;>Hover&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-sm&quot; disabled>Disabled&lt;/button>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Block</h3>
	<div class="f-example">
		<button type="button" class="ds-btn ds-btn-primary ds-btn-block" id="phantom-ds-btn-block">Block</button>
		<button type="button" class="ds-btn ds-btn-primary ds-btn-block ds-active" id="phantom-ds-btn-block-active">Hover</button>
		<button type="button" class="ds-btn ds-btn-primary ds-btn-block" id="phantom-ds-btn-block-disabled" disabled>Disabled</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-block&quot;>Block&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-block ds-active&quot;>Hover&lt;/button>
&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-block&quot; disabled>Disabled&lt;/button>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Button Colors</h3>
	<p>Documentation for changing button colors can be found on the <a href="./getting-started.html#download">Getting Started</a> page. Button colors follow the guide on the Design System's <a href="./content.html#colors">Colors</a> section.
		<div class="f-example">
			<button type="button" class="ds-btn ds-btn-primary" id="phantom-ds-btn-green">Donate</button>
			<button type="button" class="ds-btn ds-btn-primary" id="phantom-ds-btn-purple">Donate</button>
			<button type="button" class="ds-btn ds-btn-primary" id="phantom-ds-btn-magenta">Donate</button>
			<br/>
			<button type="button" class="ds-btn ds-btn-primary" id="phantom-ds-btn-orange">Donate</button>
			<button type="button" class="ds-btn ds-btn-primary" id="phantom-ds-btn-blue">Donate</button>
			<button type="button" class="ds-btn ds-btn-primary" id="phantom-ds-btn-white">Donate</button>
		</div>
</section>

<section class="f-section">
	<h3 class="f-example-title">Button Animations</h3>
	<p>The ripple animations are applied to all buttons by default.* To remove the ripple effect, there are two routes you can take. The first is to use the Design System's preset class <code class="language-markup">.ds-no-ripple</code> and add it to the button
		in which you want the ripple effect removed (pictured below).</p>
	<p>The second route is to create a custom JS file and set up your own overwrite function using the <code class="language-markup">exclude</code> parameter. Refer to <a href="https://github.com/JDRF/design-system/blob/master/src/js/app.js" target="_blank">app.js</a>		for reference. Using the second route, multiple classes can be added to remove the ripple effect.</p>
	<p>The loading icon can be added into a button by adding a class of <code class="language-markup">.ds-btn-loading</code> to existing button classes.*</p>
	<p><small>* Ripple effect supported in IE10+ in addition to modern browsers.</small><br/>
		<small>* Loading icon is replaced with the word "Loading..." in IE9 and lower.</small></p>
	<div class="f-example">
		<button type="button" class="ds-btn ds-btn-primary ds-no-ripple" id="phantom-ds-btn-ripple">Remove Ripple</button>
		<button type="button" class="ds-btn ds-btn-primary ds-btn-loading" id="phantom-ds-btn-loading">
			<svg class="ds-spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
				<circle class="ds-path" cx="50" cy="50" r="20" fill="none" stroke="#ffffff" stroke-width="4" stroke-miterlimit="10"></circle>
			</svg>
		</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-no-ripple&quot;>Remove Ripple&lt;/button>

&lt;button type=&quot;button&quot; class=&quot;ds-btn ds-btn-primary ds-btn-loading&quot;>
	&lt;svg class=&quot;ds-spinner&quot; viewBox=&quot;25 25 50 50&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;>
		&lt;circle class=&quot;ds-path&quot; cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;20&quot; fill=&quot;none&quot; stroke=&quot;#ffffff&quot; stroke-width=&quot;4&quot; stroke-miterlimit=&quot;10&quot;>&lt;/circle>
	&lt;/svg>
&lt;/button>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Button Group</h3>
	<div class="f-example" id="phantom-ds-toggle-segment">
		<div class="ds-btn-group" role="group" aria-label="Button Group Horizontal">
			<button type="button" class="ds-btn">Left</button>
			<button type="button" class="ds-btn">Center</button>
			<button type="button" class="ds-btn">Right</button>
		</div>

		<div class="ds-btn-group-vertical" role="group" aria-label="Button Group Vertical">
			<button type="button" class="ds-btn">Left</button>
			<button type="button" class="ds-btn">Center</button>
			<button type="button" class="ds-btn">Right</button>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button Group Horizontal&quot;>
	&lt;button type=&quot;button&quot; class=&quot;ds-btn&quot;>Left&lt;/button>
	&lt;button type=&quot;button&quot; class=&quot;ds-btn&quot;>Center&lt;/button>
	&lt;button type=&quot;button&quot; class=&quot;ds-btn&quot;>Right&lt;/button>
&lt;/div>

&lt;div class=&quot;ds-btn-group-vertical&quot; role=&quot;group&quot; aria-label=&quot;Button Group Vertical&quot;>
	&lt;button type=&quot;button&quot; class=&quot;ds-btn&quot;>Left&lt;/button>
	&lt;button type=&quot;button&quot; class=&quot;ds-btn&quot;>Center&lt;/button>
	&lt;button type=&quot;button&quot; class=&quot;ds-btn&quot;>Right&lt;/button>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Button Toolbar</h3>
	<div class="f-example" id="phantom-ds-toggle-icon-bar">
		<div class="ds-btn-toolbar" role="toolbar" aria-label="Button Toolbar">
			<div class="ds-btn-group ds-btn-icon-group" role="group" aria-label="Icon Group">
				<button type="button" class="material-icons mi-format-align-left ds-btn">
					<span class="ds-sr-only">Primary button with align left icon.</span>
				</button>
				<button type="button" class="material-icons mi-format-align-center ds-btn">
					<span class="ds-sr-only">Primary button with align center icon.</span>
				</button>
				<button type="button" class="material-icons mi-format-align-right ds-btn">
					<span class="ds-sr-only">Primary button with align right icon.</span>
				</button>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-btn-toolbar&quot; role=&quot;toolbar&quot; aria-label=&quot;Button Toolbar&quot;>
	&lt;div class=&quot;ds-btn-group ds-btn-icon-group&quot; role=&quot;group&quot; aria-label=&quot;Icon Group&quot;>
		&lt;button type=&quot;button&quot; class=&quot;material-icons mi-format-align-left ds-btn&quot;>
			&lt;span class=&quot;ds-sr-only&quot;>Primary button with align left icon.&lt;/span>
		&lt;/button>
		&lt;button type=&quot;button&quot; class=&quot;material-icons mi-format-align-center ds-btn&quot;>
			&lt;span class=&quot;ds-sr-only&quot;>Primary button with align center icon.&lt;/span>
		&lt;/button>
		&lt;button type=&quot;button&quot; class=&quot;material-icons mi-format-align-right ds-btn&quot;>
			&lt;span class=&quot;ds-sr-only&quot;>Primary button with align right icon.&lt;/span>
		&lt;/button>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Checkbox Buttons</h3>
	<p>Checkbox button groups use <a href="http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons" target="_blank">Bootstrap's native classes</a> as well as the <code class="language-markup">.ds-checkbox-buttons</code> class.</p>
	<div class="f-example" id="phantom-ds-checkbox-buttons">
		<div class="ds-btn-group ds-checkbox-buttons" data-toggle="buttons">
			<label class="ds-btn ds-btn-primary ds-active btn-icon">
				<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
			</label>
			<label class="ds-btn ds-btn-primary btn-icon">
				<input type="checkbox" autocomplete="off"> Checkbox 2
			</label>
			<label class="ds-btn ds-btn-primary btn-icon">
				<input type="checkbox" autocomplete="off"> Checkbox 3
			</label>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-btn-group ds-checkbox-buttons&quot; data-toggle=&quot;buttons&quot;>
	&lt;label class=&quot;ds-btn ds-btn-primary ds-active btn-icon&quot;>
		&lt;input type=&quot;checkbox&quot; checked autocomplete=&quot;off&quot;> Checkbox 1 (pre-checked)
	&lt;/label>
	&lt;label class=&quot;ds-btn ds-btn-primary btn-icon&quot;>
		&lt;input type=&quot;checkbox&quot; autocomplete=&quot;off&quot;> Checkbox 2
	&lt;/label>
	&lt;label class=&quot;ds-btn ds-btn-primary btn-icon&quot;>
		&lt;input type=&quot;checkbox&quot; autocomplete=&quot;off&quot;> Checkbox 3
	&lt;/label>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Radio Buttons</h3>
	<p>Radio button groups use <a href="http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons" target="_blank">Bootstrap's native classes</a> as well as the <code class="language-markup">.ds-radio-buttons</code> class.</p>
	<div class="f-example" id="phantom-ds-radio-buttons">
		<div class="ds-btn-group ds-radio-buttons" data-toggle="buttons">
			<label class="ds-btn ds-btn-primary ds-active">
				<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
			</label>
			<label class="ds-btn ds-btn-primary">
				<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
			</label>
			<label class="ds-btn ds-btn-primary">
				<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
			</label>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-btn-group ds-radio-buttons&quot; data-toggle=&quot;buttons&quot;>
	&lt;label class=&quot;ds-btn ds-btn-primary ds-active&quot;>
		&lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option1&quot; autocomplete=&quot;off&quot; checked> Radio 1 (preselected)
	&lt;/label>
	&lt;label class=&quot;ds-btn ds-btn-primary&quot;>
		&lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option2&quot; autocomplete=&quot;off&quot;> Radio 2
	&lt;/label>
	&lt;label class=&quot;ds-btn ds-btn-primary&quot;>
		&lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option3&quot; autocomplete=&quot;off&quot;> Radio 3
	&lt;/label>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Using Icons with Buttons</h3>
	<p>It is recommended to make use of the <code class="language-markup">.ds-sr-only</code> class to include screen-reader text that is visually hidden, but can help identify icons to screen reader users.</p>

	<p>Material Icons have a <a href="http://google.github.io/material-design-icons/#icon-font-for-the-web">ligatures feature</a> that allows icons to show by typing within the element. Due to this feature, depending on whether the button is icon only or icon
		with text, the structure of the HTML will have to change slightly.</p>

	<p>Icons inside buttons will use existing <a href="./components.html#buttons">button classes</a> in addition to the <code class="language-markup">.ds-btn-icon</code> class.</p>
</section>

<section class="f-section">
	<h3 class="f-example-title">Icon Only Buttons</h3>
	<div class="f-example">
		<button type="button" name="mood-button-example" class="material-icons mi-mood ds-btn-icon ds-btn ds-btn-primary" id="phantom-ds-btn-icon-primary">
			<span class="ds-sr-only">Primary button with mood icon.</span>
		</button>

		<button type="button" name="mood-button-example" class="material-icons mi-mood ds-btn-icon ds-btn ds-btn-primary-outline" id="phantom-ds-btn-icon-outline">
			<span class="ds-sr-only">Outline button with mood icon.</span>
		</button>

		<button type="button" name="mood-button-example" class="material-icons mi-mood ds-btn-icon ds-btn ds-btn-flat" id="phantom-ds-btn-icon-flat">
			<span class="ds-sr-only">Flat button with mood icon.</span>
		</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; name=&quot;mood-button-example&quot; class=&quot;material-icons mi-mood ds-btn-icon ds-btn ds-btn-primary&quot;>
	&lt;span class=&quot;ds-sr-only&quot;>Primary button with mood icon.&lt;/span>
&lt;/button>

&lt;button type=&quot;button&quot; name=&quot;mood-button-example&quot; class=&quot;material-icons mi-mood ds-btn-icon ds-btn ds-btn-primary-outline&quot;>
	&lt;span class=&quot;ds-sr-only&quot;>Outline button with mood icon.&lt;/span>
&lt;/button>

&lt;button type=&quot;button&quot; name=&quot;mood-button-example&quot; class=&quot;material-icons mi-mood ds-btn-icon ds-btn ds-btn-flat&quot;>
	&lt;span class=&quot;ds-sr-only&quot;>Flat button with mood icon.&lt;/span>
&lt;/button></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Left Icon with Text</h3>
	<div class="f-example">
		<button type="button" name="app-button-example" class="ds-btn ds-btn-primary ds-btn-lg ds-btn-icon" id="phantom-ds-btn-left-icon-lg">
			<span class="material-icons mi-get-app" aria-hidden="true"></span>
			<span>Icon Left</span>
		</button>
		<button type="button" name="app-button-example" class="ds-btn ds-btn-primary ds-btn-icon" id="phantom-ds-btn-left-icon-normal">
			<span class="material-icons mi-get-app" aria-hidden="true"></span>
			<span>Icon Left</span>
		</button>
		<button type="button" name="app-button-example" class="ds-btn ds-btn-primary ds-btn-sm ds-btn-icon" id="phantom-ds-btn-left-icon-sm">
			<span class="material-icons mi-get-app" aria-hidden="true"></span>
			<span>Icon Left</span>
		</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; name=&quot;app-button-example&quot; class=&quot;ds-btn ds-btn-primary ds-btn-lg ds-btn-icon&quot;>
	&lt;span class=&quot;material-icons mi-get-app&quot; aria-hidden=&quot;true&quot;>&lt;/span>
	&lt;span>Icon Left&lt;/span>
&lt;/button>
&lt;button type=&quot;button&quot; name=&quot;app-button-example&quot; class=&quot;ds-btn ds-btn-primary ds-btn-icon&quot;>
	&lt;span class=&quot;material-icons mi-get-app&quot; aria-hidden=&quot;true&quot;>&lt;/span>
	&lt;span>Icon Left&lt;/span>
&lt;/button>
&lt;button type=&quot;button&quot; name=&quot;app-button-example&quot; class=&quot;ds-btn ds-btn-primary ds-btn-sm ds-btn-icon&quot;>
	&lt;span class=&quot;material-icons mi-get-app&quot; aria-hidden=&quot;true&quot;>&lt;/span>
	&lt;span>Icon Left&lt;/span>
&lt;/button></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Right Icon with Text</h3>

	<div class="f-example">
		<button type="button" name="app-button-example" class="ds-btn ds-btn-primary ds-btn-lg ds-btn-icon" id="phantom-ds-btn-right-icon-lg">
			<span>Icon Right</span>
			<span class="material-icons mi-arrow-forward" aria-hidden="true"></span>
		</button>
		<button type="button" name="app-button-example" class="ds-btn ds-btn-primary ds-btn-icon" id="phantom-ds-btn-right-icon-normal">
			<span>Icon Right</span>
			<span class="material-icons mi-arrow-forward" aria-hidden="true"></span>
		</button>
		<button type="button" name="app-button-example" class="ds-btn ds-btn-primary ds-btn-sm ds-btn-icon" id="phantom-ds-btn-right-icon-sm">
			<span>Icon Right</span>
			<span class="material-icons mi-arrow-forward" aria-hidden="true"></span>
		</button>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;button type=&quot;button&quot; name=&quot;app-button-example&quot; class=&quot;ds-btn ds-btn-primary ds-btn-lg ds-btn-icon&quot;>
	&lt;span>Icon Right&lt;/span>
	&lt;span class=&quot;material-icons mi-arrow-forward&quot; aria-hidden=&quot;true&quot;>&lt;/span>
&lt;/button>
&lt;button type=&quot;button&quot; name=&quot;app-button-example&quot; class=&quot;ds-btn ds-btn-primary ds-btn-icon&quot;>
	&lt;span>Icon Right&lt;/span>
	&lt;span class=&quot;material-icons mi-arrow-forward&quot; aria-hidden=&quot;true&quot;>&lt;/span>
&lt;/button>
&lt;button type=&quot;button&quot; name=&quot;app-button-example&quot; class=&quot;ds-btn ds-btn-primary ds-btn-sm ds-btn-icon&quot;>
	&lt;span>Icon Right&lt;/span>
	&lt;span class=&quot;material-icons mi-arrow-forward&quot; aria-hidden=&quot;true&quot;>&lt;/span>
&lt;/button></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Text Field</h3>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group">
				<label for="phantom-inputtext1" class="ds-form-control-label ds-form-label-relative ds-label-required">Default <span>*</span></label>
				<input type="text" class="ds-form-control ds-form-relative" id="phantom-inputtext1" placeholder="First name">
			</fieldset>
			<fieldset class="ds-form-group ds-has-filled">
				<label for="phantom-inputtext2" class="ds-form-control-label ds-form-label-relative ds-label-required">Filled <span>*</span></label>
				<input type="text" class="ds-form-control ds-form-relative" id="phantom-inputtext2" placeholder="First name" value="Frederick">
			</fieldset>
			<fieldset class="ds-form-group ds-has-success">
				<label for="phantom-inputtext3" class="ds-form-control-label ds-form-label-relative ds-label-required">Valid <span>*</span></label>
				<input type="text" class="ds-form-control ds-form-relative ds-form-control-success" id="phantom-inputtext3" placeholder="First name" value="Frederick">
			</fieldset>
			<fieldset class="ds-form-group ds-has-danger">
				<label for="phantom-inputtext4" class="ds-form-control-label ds-form-label-relative ds-label-required">Error <span>*</span></label>
				<input type="text" class="ds-form-control ds-form-relative ds-form-control-danger" id="phantom-inputtext4" placeholder="First name">
				<small class="ds-text-help">
				  Helpful error message.
				</small>
			</fieldset>
			<fieldset class="ds-form-group" disabled>
				<label for="phantom-inputtext5" class="ds-form-control-label ds-form-label-relative">Disabled</label>
				<input type="text" class="ds-form-control ds-form-relative" id="phantom-inputtext5" placeholder="First name">
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group&quot;>
			&lt;label for=&quot;inputtext1&quot; class=&quot;ds-form-control-label ds-form-label-relative ds-label-required&quot;>Default &lt;span>*&lt;/span>&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;inputtext1&quot; placeholder=&quot;First name&quot;>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-has-filled&quot;>
			&lt;label for=&quot;inputtext2&quot; class=&quot;ds-form-control-label ds-form-label-relative ds-label-required&quot;>Filled &lt;span>*&lt;/span>&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative ds-label-required&quot; id=&quot;inputtext2&quot; placeholder=&quot;First name&quot; value=&quot;Frederick&quot;>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-has-success&quot;>
			&lt;label for=&quot;inputtext3&quot; class=&quot;ds-form-control-label ds-form-label-relative ds-label-required&quot;>Valid &lt;span>*&lt;/span>&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative ds-form-control-success ds-label-required&quot; id=&quot;inputtext3&quot; placeholder=&quot;First name&quot; value=&quot;Frederick&quot;>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-has-danger&quot;>
			&lt;label for=&quot;inputtext4&quot; class=&quot;ds-form-control-label ds-form-label-relative ds-label-required&quot;>Error &lt;span>*&lt;/span>&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative ds-form-control-danger ds-label-required&quot; id=&quot;inputtext4&quot; placeholder=&quot;First name&quot;>
			&lt;small class=&quot;ds-text-help&quot;>
			  Helpful error message.
			&lt;/small>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group&quot; disabled>
			&lt;label for=&quot;inputtext5&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Disabled&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;inputtext5&quot; placeholder=&quot;First name&quot;>
	&lt;/fieldset>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Textarea</h3>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group">
				<label for="phantom-exampleTextarea" class="ds-form-control-label ds-form-label-relative ds-label-optional">
          Your Message <span>(Optional)</span>
        </label>
				<textarea class="ds-form-control ds-form-relative" id="phantom-exampleTextarea" rows="7" placeholder="Placeholder"></textarea>
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group&quot;>
		&lt;label for=&quot;exampleTextarea&quot; class=&quot;ds-form-control-label ds-form-label-relative ds-label-optional&quot;>
			Your Message &lt;span>(Optional)&lt;/span>
		&lt;/label>
		&lt;textarea class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleTextarea&quot; rows=&quot;7&quot; placeholder=&quot;Placeholder&quot;>&lt;/textarea>
	&lt;/fieldset>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Text Field &amp; Hidden Labels</h3>
	<p>The <code class="language-markup">.ds-hidden-labels</code> class should be placed on form groups with hidden labels in addition to the <code class="language-markup">.ds-sr-only</code> class on the labels themselves. Also keep in mind that <a href="http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#internet-explorer-9"
			target="_blank">IE9 does not support placeholders</a>, therefore leaving fields without visible labels missing context.</p>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group ds-hidden-labels">
				<label for="phantom-inputtext1" class="ds-form-control-label ds-sr-only">Default</label>
				<input type="text" class="ds-form-control" id="phantom-inputtext1" placeholder="Default">
			</fieldset>
			<fieldset class="ds-form-group ds-hidden-labels ds-has-filled">
				<label for="phantom-inputtext2" class="ds-form-control-label ds-sr-only">Filled</label>
				<input type="text" class="ds-form-control" id="phantom-inputtext2" placeholder="Filled" value="Filled">
			</fieldset>
			<fieldset class="ds-form-group ds-hidden-labels" disabled>
				<label for="phantom-inputtext3" class="ds-form-control-label ds-sr-only">Disabled</label>
				<input type="text" class="ds-form-control" id="phantom-inputtext3" placeholder="Disabled">
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group ds-hidden-labels&quot;>
		&lt;label for=&quot;inputtext1&quot; class=&quot;ds-form-control-label ds-sr-only&quot;>Default&lt;/label>
		&lt;input type=&quot;text&quot; class=&quot;ds-form-control&quot; id=&quot;inputtext1&quot; placeholder=&quot;Default&quot;>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-hidden-labels ds-has-filled&quot;>
		&lt;label for=&quot;inputtext2&quot; class=&quot;ds-form-control-label ds-sr-only&quot;>Filled&lt;/label>
		&lt;input type=&quot;text&quot; class=&quot;ds-form-control&quot; id=&quot;inputtext2&quot; placeholder=&quot;Filled&quot; value=&quot;Filled&quot;>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-hidden-labels&quot; disabled>
		&lt;label for=&quot;inputtext3&quot; class=&quot;ds-form-control-label ds-sr-only&quot;>Disabled&lt;/label>
		&lt;input type=&quot;text&quot; class=&quot;ds-form-control&quot; id=&quot;inputtext3&quot; placeholder=&quot;Disabled&quot;>
	&lt;/fieldset>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Inline Forms: Visible Labels</h3>
	<div class="f-example">
		<form class="ds-form-inline">
			<fieldset class="ds-form-group">
				<label for="exampleInputName2" class="ds-form-control-label ds-form-label-relative">Name</label>
				<input type="text" class="ds-form-control ds-form-relative" id="exampleInputName2" placeholder="Jane Doe">
			</fieldset>
			<fieldset class="ds-form-group">
				<label for="exampleInputEmail2" class="ds-form-control-label ds-form-label-relative">Email</label>
				<input type="email" class="ds-form-control ds-form-relative" id="exampleInputEmail2" placeholder="jane.doe@example.com">
			</fieldset>
			<button type="submit" class="ds-btn ds-btn-primary f-inline-form-btn">Send invitation</button>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form class=&quot;ds-form-inline&quot;>
	&lt;fieldset class=&quot;ds-form-group&quot;>
		&lt;label for=&quot;exampleInputName2&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Name&lt;/label>
		&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleInputName2&quot; placeholder=&quot;Jane Doe&quot;>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group&quot;>
		&lt;label for=&quot;exampleInputEmail2&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Email&lt;/label>
		&lt;input type=&quot;email&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleInputEmail2&quot; placeholder=&quot;jane.doe@example.com&quot;>
	&lt;/fieldset>
	&lt;button type=&quot;submit&quot; class=&quot;ds-btn ds-btn-primary&quot;>Send invitation&lt;/button>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Inline Forms: Hidden Labels</h3>
	<div class="f-example">
		<form class="ds-form-inline">
			<fieldset class="ds-form-group ds-hidden-labels">
				<label class="ds-sr-only" for="exampleInputEmail3">Email address</label>
				<input type="email" class="ds-form-control" id="exampleInputEmail3" placeholder="Enter email">
			</fieldset>
			<fieldset class="ds-form-group ds-hidden-labels">
				<label class="ds-sr-only" for="exampleInputPassword3">Password</label>
				<input type="password" class="ds-form-control" id="exampleInputPassword3" placeholder="Password">
			</fieldset>
			<button type="submit" class="ds-btn ds-btn-primary f-inline-form-btn">Sign in</button>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form class=&quot;ds-form-inline&quot;>
	&lt;fieldset class=&quot;ds-form-group ds-hidden-labels&quot;>
		&lt;label class=&quot;ds-sr-only&quot; for=&quot;exampleInputEmail3&quot;>Email address&lt;/label>
		&lt;input type=&quot;email&quot; class=&quot;ds-form-control&quot; id=&quot;exampleInputEmail3&quot; placeholder=&quot;Enter email&quot;>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-hidden-labels&quot;>
		&lt;label class=&quot;ds-sr-only&quot; for=&quot;exampleInputPassword3&quot;>Password&lt;/label>
		&lt;input type=&quot;password&quot; class=&quot;ds-form-control&quot; id=&quot;exampleInputPassword3&quot; placeholder=&quot;Password&quot;>
	&lt;/fieldset>
	&lt;button type=&quot;submit&quot; class=&quot;ds-btn ds-btn-primary&quot;>Sign in&lt;/button>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Email Field</h3>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group">
				<label for="phantom-exampleInputEmail1" class="ds-form-control-label ds-form-label-relative">Email Address</label>
				<input type="email" class="ds-form-control ds-form-relative" id="phantom-exampleInputEmail1" placeholder="Enter email">
				<small class="ds-text-muted">We'll never share your email with anyone else.</small>
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group&quot;>
		&lt;label for=&quot;exampleInputEmail&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Email Address&lt;/label>
		&lt;input type=&quot;email&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleInputEmail&quot; placeholder=&quot;Enter email&quot;>
		&lt;small class=&quot;ds-text-muted&quot;>We&apos;ll never share your email with anyone else.&lt;/small>
	&lt;/fieldset>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Password Field</h3>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group">
				<label for="phantom-exampleInputPassword" class="ds-form-control-label ds-form-label-relative">Password</label>
				<input type="password" class="ds-form-control ds-form-relative" id="phantom-exampleInputPassword" placeholder="Enter Password">
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group&quot;>
		&lt;label for=&quot;phantom-exampleInputPassword&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Password&lt;/label>
		&lt;input type=&quot;password&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;phantom-exampleInputPassword&quot; placeholder=&quot;Enter Password&quot;>
	&lt;/fieldset>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Telephone Field</h3>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group">
				<label for="phantom-exampleInputTel" class="ds-form-control-label ds-form-label-relative">Telephone</label>
				<input type="tel" class="ds-form-control ds-form-relative" id="phantom-exampleInputTel" placeholder="Enter phone number">
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group&quot;>
		&lt;label for=&quot;phantom-exampleInputTel&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Telephone&lt;/label>
		&lt;input type=&quot;tel&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;phantom-exampleInputTel&quot; placeholder=&quot;Enter phone number&quot;>
	&lt;/fieldset>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Date Field</h3>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group">
				<label for="phantom-exampleInputDate" class="ds-form-control-label ds-form-label-relative">Date</label>
				<input type="date" class="ds-form-control ds-form-relative" id="phantom-exampleInputDate" placeholder="mm/dd/yyyy">
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group&quot;>
		&lt;label for=&quot;phantom-exampleInputDate&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Date&lt;/label>
		&lt;input type=&quot;date&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;phantom-exampleInputDate&quot; placeholder=&quot;mm/dd/yyyy&quot;>
	&lt;/fieldset>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">International Address</h3>
	<p>Address forms use the <code class="language-markup">.ds-form-address</code> class on the form element in addition to Bootstrap's grid classes.</p>
	<div class="f-example">
		<form class="ds-form-address ds-container">
			<fieldset class="ds-form-group ds-row">
				<div class="ds-col-md-8">
					<label for="exampleInputAddress1" class="ds-form-control-label ds-form-label-relative">Street Address</label>
					<input type="text" class="ds-form-control ds-form-relative" id="exampleInputAddress1" placeholder="Enter Street Address">
				</div>
			</fieldset>
			<fieldset class="ds-form-group ds-row">
				<div class="ds-col-md-8">
					<label for="exampleInputAddress2" class="ds-form-control-label ds-form-label-relative">Address Line 2</label>
					<input type="text" class="ds-form-control ds-form-relative" id="exampleInputAddress2" placeholder="Enter Address Line 2">
				</div>
			</fieldset>
			<div class="ds-form-inline ds-row">
				<fieldset class="ds-form-group ds-col-md-4">
					<label for="exampleCity" class="ds-form-control-label ds-form-label-relative">City</label>
					<input type="text" class="ds-form-control ds-form-relative" id="exampleCity" placeholder="Enter City">
				</fieldset>
				<fieldset class="ds-form-group ds-col-md-4">
					<label for="exampleState" class="ds-form-control-label ds-form-label-relative">State/Province/Region</label>
					<input type="email" class="ds-form-control ds-form-relative" id="exampleState" placeholder="Enter State/Province/Region">
				</fieldset>
			</div>
			<div class="ds-form-inline ds-row">
				<fieldset class="ds-form-group ds-col-md-4">
					<label for="exampleZip" class="ds-form-control-label ds-form-label-relative">Zip/Postal Code</label>
					<input type="text" class="ds-form-control ds-form-relative" id="exampleZip" placeholder="Enter Zip/Postal Code">
				</fieldset>
				<fieldset class="ds-form-group ds-col-md-4">
					<label for="exampleCountry" class="ds-form-control-label ds-form-label-relative">Country</label>
					<select class="ds-form-control ds-form-relative ds-c-select" id="exampleCountry">
						<option>Country 1</option>
						<option>Country 2</option>
						<option>Country 3</option>
						<option>Country 4</option>
						<option>Country 5</option>
					</select>
				</fieldset>
			</div>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form class=&quot;ds-form-address ds-container&quot;>
	&lt;fieldset class=&quot;ds-form-group ds-row&quot;>
		&lt;div class=&quot;ds-col-md-8&quot;>
			&lt;label for=&quot;exampleInputAddress1&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Street Address&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleInputAddress1&quot; placeholder=&quot;Enter Street Address&quot;>
		&lt;/div>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-row&quot;>
		&lt;div class=&quot;ds-col-md-8&quot;>
			&lt;label for=&quot;exampleInputAddress2&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Address Line 2&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleInputAddress2&quot; placeholder=&quot;Enter Address Line 2&quot;>
		&lt;/div>
	&lt;/fieldset>
	&lt;div class=&quot;ds-form-inline ds-row&quot;>
		&lt;fieldset class=&quot;ds-form-group ds-col-md-4&quot;>
			&lt;label for=&quot;exampleCity&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>City&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleCity&quot; placeholder=&quot;Enter City&quot;>
		&lt;/fieldset>
		&lt;fieldset class=&quot;ds-form-group ds-col-md-4&quot;>
			&lt;label for=&quot;exampleState&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>State/Province/Region&lt;/label>
			&lt;input type=&quot;email&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleState&quot; placeholder=&quot;Enter State/Province/Region&quot;>
		&lt;/fieldset>
	&lt;/div>
	&lt;div class=&quot;ds-form-inline ds-row&quot;>
		&lt;fieldset class=&quot;ds-form-group ds-col-md-4&quot;>
			&lt;label for=&quot;exampleZip&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Zip/Postal Code&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleZip&quot; placeholder=&quot;Enter Zip/Postal Code&quot;>
		&lt;/fieldset>
		&lt;fieldset class=&quot;ds-form-group ds-col-md-4&quot;>
			&lt;label for=&quot;exampleCountry&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Country&lt;/label>
			&lt;select class=&quot;ds-form-control ds-form-relative ds-c-select&quot; id=&quot;exampleCountry&quot;>
				&lt;option>Country 1&lt;/option>
				&lt;option>Country 2&lt;/option>
				&lt;option>Country 3&lt;/option>
				&lt;option>Country 4&lt;/option>
				&lt;option>Country 5&lt;/option>
			&lt;/select>
		&lt;/fieldset>
	&lt;/div>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">USA Address</h3>
	<div class="f-example">
		<form class="ds-form-address ds-container">
			<fieldset class="ds-form-group ds-row">
				<div class="ds-col-md-8">
					<label for="exampleInputAddress3" class="ds-form-control-label ds-form-label-relative">Street Address</label>
					<input type="text" class="ds-form-control ds-form-relative" id="exampleInputAddress3" placeholder="Enter Street Address">
				</div>
			</fieldset>
			<fieldset class="ds-form-group ds-row">
				<div class="ds-col-md-8">
					<label for="exampleInputAddress4" class="ds-form-control-label ds-form-label-relative">Address Line 2</label>
					<input type="text" class="ds-form-control ds-form-relative" id="exampleInputAddress4" placeholder="Enter Address Line 2">
				</div>
			</fieldset>
			<div class="ds-form-inline ds-row">
				<fieldset class="ds-form-group ds-col-md-4">
					<label for="exampleCity1" class="ds-form-control-label ds-form-label-relative">City</label>
					<input type="text" class="ds-form-control ds-form-relative" id="exampleCity1" placeholder="Enter City">
				</fieldset>
				<fieldset class="ds-form-group ds-col-md-4" class="ds-form-control-label">
					<label for="exampleState1" class="ds-form-control-label ds-form-label-relative">State</label>
					<input type="email" class="ds-form-control ds-form-relative" id="exampleState1" placeholder="Enter State">
				</fieldset>
			</div>
			<fieldset class="ds-form-group ds-row">
				<div class="ds-col-md-4">
					<label for="exampleZip1" class="ds-form-control-label ds-form-label-relative">Zip Code</label>
					<input type="text" class="ds-form-control ds-form-relative" id="exampleZip1" placeholder="Enter Zip Code">
				</div>
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form class=&quot;ds-form-address ds-container&quot;>
	&lt;fieldset class=&quot;ds-form-group ds-row&quot;>
		&lt;div class=&quot;ds-col-md-8&quot;>
			&lt;label for=&quot;exampleInputAddress3&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Street Address&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleInputAddress3&quot; placeholder=&quot;Enter Street Address&quot;>
		&lt;/div>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-row&quot;>
		&lt;div class=&quot;ds-col-md-8&quot;>
			&lt;label for=&quot;exampleInputAddress4&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Address Line 2&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleInputAddress4&quot; placeholder=&quot;Enter Address Line 2&quot;>
		&lt;/div>
	&lt;/fieldset>
	&lt;div class=&quot;ds-form-inline ds-row&quot;>
		&lt;fieldset class=&quot;ds-form-group ds-col-md-4&quot;>
			&lt;label for=&quot;exampleCity1&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>City&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleCity1&quot; placeholder=&quot;Enter City&quot;>
		&lt;/fieldset>
		&lt;fieldset class=&quot;ds-form-group ds-col-md-4&quot; class=&quot;ds-form-control-label&quot;>
			&lt;label for=&quot;exampleState1&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>State&lt;/label>
			&lt;input type=&quot;email&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleState1&quot; placeholder=&quot;Enter State&quot;>
		&lt;/fieldset>
	&lt;/div>
	&lt;fieldset class=&quot;ds-form-group ds-row&quot;>
		&lt;div class=&quot;ds-col-md-4&quot;>
			&lt;label for=&quot;exampleZip1&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Zip Code&lt;/label>
			&lt;input type=&quot;text&quot; class=&quot;ds-form-control ds-form-relative&quot; id=&quot;exampleZip1&quot; placeholder=&quot;Enter Zip Code&quot;>
		&lt;/div>
	&lt;/fieldset>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Custom Select Box</h3>
	<p>The select box needs the <code class="language-markup">.ds-c-select</code> class on the select element for custom styles to apply. You can view <a href="http://v4-alpha.getbootstrap.com/components/forms/#select-menu" target="_blank">Bootstrap's example</a>		on their form documentation.</p>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group">
				<label for="exampleSelect1" class="ds-form-control-label ds-form-label-relative ds-label-required">Default <span>*</span></label>
				<select class="ds-form-control ds-form-relative ds-c-select" id="exampleSelect1">
					<option disabled selected value=""></option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
				</select>
			</fieldset>
			<fieldset class="ds-form-group ds-has-filled">
				<label for="exampleSelect2" class="ds-form-control-label ds-form-label-relative ds-label-required">Filled/Valid <span>*</span></label>
				<select class="ds-form-control ds-form-relative ds-c-select" id="exampleSelect2">
					<option disabled value=""></option>
					<option value="1">1</option>
					<option value="2" selected>2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
				</select>
			</fieldset>
			<fieldset class="ds-form-group ds-has-danger">
				<label for="exampleSelect3" class="ds-form-control-label ds-form-label-relative ds-label-required">Error <span>*</span></label>
				<select class="ds-form-control ds-form-relative ds-c-select" id="exampleSelect3">
					<option disabled selected value=""></option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
				</select>
				<small class="ds-text-help">This field is required</small>
			</fieldset>
			<fieldset class="ds-form-group" disabled>
				<label for="exampleSelect4" class="ds-form-control-label ds-form-label-relative">Disabled</label>
				<select class="ds-form-control ds-form-relative ds-c-select" id="exampleSelect4">
					<option disabled selected value=""></option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
				</select>
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group&quot;>
		&lt;label for=&quot;exampleSelect1&quot; class=&quot;ds-form-control-label ds-form-label-relative ds-label-required&quot;>Default &lt;span>*&lt;/span>&lt;/label>
		&lt;select class=&quot;ds-form-control ds-form-relative ds-c-select&quot; id=&quot;exampleSelect1&quot;>
			&lt;option disabled selected value=&quot;&quot;>&lt;/option>
			&lt;option value=&quot;1&quot;>1&lt;/option>
			&lt;option value=&quot;2&quot;>2&lt;/option>
			&lt;option value=&quot;3&quot;>3&lt;/option>
			&lt;option value=&quot;4&quot;>4&lt;/option>
			&lt;option value=&quot;5&quot;>5&lt;/option>
		&lt;/select>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-has-filled&quot;>
		&lt;label for=&quot;exampleSelect2&quot; class=&quot;ds-form-control-label ds-form-label-relative ds-label-required&quot;>Filled/Valid &lt;span>*&lt;/span>&lt;/label>
		&lt;select class=&quot;ds-form-control ds-form-relative ds-c-select&quot; id=&quot;exampleSelect2&quot;>
			&lt;option disabled value=&quot;&quot;>&lt;/option>
			&lt;option value=&quot;1&quot;>1&lt;/option>
			&lt;option value=&quot;2&quot; selected>2&lt;/option>
			&lt;option value=&quot;3&quot;>3&lt;/option>
			&lt;option value=&quot;4&quot;>4&lt;/option>
			&lt;option value=&quot;5&quot;>5&lt;/option>
		&lt;/select>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group ds-has-danger&quot;>
		&lt;label for=&quot;exampleSelect3&quot; class=&quot;ds-form-control-label ds-form-label-relative ds-label-required&quot;>Error &lt;span>*&lt;/span>&lt;/label>
		&lt;select class=&quot;ds-form-control ds-form-relative ds-c-select&quot; id=&quot;exampleSelect3&quot;>
			&lt;option disabled selected value=&quot;&quot;>&lt;/option>
			&lt;option value=&quot;1&quot;>1&lt;/option>
			&lt;option value=&quot;2&quot;>2&lt;/option>
			&lt;option value=&quot;3&quot;>3&lt;/option>
			&lt;option value=&quot;4&quot;>4&lt;/option>
			&lt;option value=&quot;5&quot;>5&lt;/option>
		&lt;/select>
		&lt;small class=&quot;ds-text-help&quot;>This field is required&lt;/small>
	&lt;/fieldset>
	&lt;fieldset class=&quot;ds-form-group&quot; disabled>
		&lt;label for=&quot;exampleSelect4&quot; class=&quot;ds-form-control-label ds-form-label-relative&quot;>Disabled&lt;/label>
		&lt;select class=&quot;ds-form-control ds-form-relative ds-c-select&quot; id=&quot;exampleSelect4&quot;>
			&lt;option disabled selected value=&quot;&quot;>&lt;/option>
			&lt;option value=&quot;1&quot;>1&lt;/option>
			&lt;option value=&quot;2&quot;>2&lt;/option>
			&lt;option value=&quot;3&quot;>3&lt;/option>
			&lt;option value=&quot;4&quot;>4&lt;/option>
			&lt;option value=&quot;5&quot;>5&lt;/option>
		&lt;/select>
	&lt;/fieldset>
&lt;/form>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Vertical Radio Options</h3>
	<p>When using custom radio buttons, the <code class="language-markup">.ds-radio-custom</code> class needs to be added to the parent wrapper with the radio button and a span nested inside. View examples below for both horizontal and vertical radio buttons.</p>
	<div class="f-example">
		<form>
			<p>A vertical set of radios are pictured below.</p>
			<label class="ds-radio-custom">
				<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
				<span>Option one is this and that&mdash;be sure to include why it's great</span>
			</label>
			<label class="ds-radio-custom">
				<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
				<span>Option two can be something else and selecting it will deselect option one</span>
			</label>
			<label class="ds-radio-custom ds-disabled">
				<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
				<span>Option three is disabled</span>
			</label>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;p>A vertical set of radios are pictured below.&lt;/p>
	&lt;label class=&quot;ds-radio-custom&quot;>
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; id=&quot;optionsRadios1&quot; value=&quot;option1&quot; checked>
		&lt;span>Option one is this and that&amp;mdash;be sure to include why it&apos;s great&lt;/span>
	&lt;/label>
	&lt;label class=&quot;ds-radio-custom&quot;>
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; id=&quot;optionsRadios2&quot; value=&quot;option2&quot;>
		&lt;span>Option two can be something else and selecting it will deselect option one&lt;/span>
	&lt;/label>
	&lt;label class=&quot;ds-radio-custom ds-disabled&quot;>
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; id=&quot;optionsRadios3&quot; value=&quot;option3&quot; disabled>
		&lt;span>Option three is disabled&lt;/span>
	&lt;/label>
&lt;/form></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Horizontal Radio Options</h3>
	<div class="f-example">
		<form>
			<p>A horizontal set of radios are pictured below.</p>
			<label class="ds-radio-custom ds-radio-inline">
				<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
				<span>USA</span>
			</label>
			<label class="ds-radio-custom ds-radio-inline">
				<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
				<span>International</span>
			</label>
			<label class="ds-radio-custom ds-disabled ds-radio-inline">
				<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" disabled>
				<span>Other is disabled</span>
			</label>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;p>A horizontal set of radios are pictured below.&lt;/p>
	&lt;label class=&quot;ds-radio-custom ds-radio-inline&quot;>
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; id=&quot;optionsRadios1&quot; value=&quot;option1&quot; checked>
		&lt;span>USA&lt;/span>
	&lt;/label>
	&lt;label class=&quot;ds-radio-custom ds-radio-inline&quot;>
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; id=&quot;optionsRadios2&quot; value=&quot;option2&quot;>
		&lt;span>International&lt;/span>
	&lt;/label>
	&lt;label class=&quot;ds-radio-custom ds-disabled ds-radio-inline&quot;>
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; id=&quot;optionsRadios2&quot; value=&quot;option2&quot; disabled>
		&lt;span>Other is disabled&lt;/span>
	&lt;/label>
&lt;/form></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Vertical Checkboxes</h3>
	<p>When using custom checkboxes, the <code class="language-markup">.ds-checkbox-custom</code> class needs to be added to the parent wrapper with the checkbox and a span nested inside. View examples below for both horizontal and vertical checkboxes.</p>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group ds-checkbox-group">
				<p class="ds-text-label">Example of vertical checkbox set below:</p>
				<label class="ds-checkbox ds-checkbox-custom">
					<input type="checkbox" value="option1" checked>
					<span>Option 1</span>
				</label>
				<label class="ds-checkbox ds-checkbox-custom">
					<input type="checkbox" value="option2">
					<span>Option 2</span>
				</label>
				<label class="ds-checkbox ds-checkbox-custom ds-disabled">
					<input type="checkbox" value="option3" disabled>
					<span>Option 3 disabled</span>
				</label>
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group ds-checkbox-group&quot;>
		&lt;p class=&quot;ds-text-label&quot;>Example of vertical checkbox set below:&lt;/p>
		&lt;label class=&quot;ds-checkbox ds-checkbox-custom&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option1&quot; checked>
			&lt;span>Option 1&lt;/span>
		&lt;/label>
		&lt;label class=&quot;ds-checkbox ds-checkbox-custom&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option2&quot;>
			&lt;span>Option 2&lt;/span>
		&lt;/label>
		&lt;label class=&quot;ds-checkbox ds-checkbox-custom ds-disabled&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option3&quot; disabled>
			&lt;span>Option 3 disabled&lt;/span>
		&lt;/label>
	&lt;/fieldset>
&lt;/form></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Horizontal Checkboxes</h3>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group ds-checkbox-group">
				<p class="ds-text-label">Example of horizontal checkbox set below:</p>
				<label class="ds-checkbox-custom ds-checkbox-inline">
					<input type="checkbox" value="option1" checked>
					<span>Option 1</span>
				</label>
				<label class="ds-checkbox-custom ds-checkbox-inline">
					<input type="checkbox" value="option2">
					<span>Option 2</span>
				</label>
				<label class="ds-checkbox-custom ds-checkbox-inline ds-disabled">
					<input type="checkbox" value="option3" disabled>
					<span>Option 3 disabled</span>
				</label>
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group ds-checkbox-group&quot;>
		&lt;p class=&quot;ds-text-label&quot;>Example of horizontal checkbox set below:&lt;/p>
		&lt;label class=&quot;ds-checkbox-custom ds-checkbox-inline&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option1&quot; checked>
			&lt;span>Option 1&lt;/span>
		&lt;/label>
		&lt;label class=&quot;ds-checkbox-custom ds-checkbox-inline&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option2&quot;>
			&lt;span>Option 2&lt;/span>
		&lt;/label>
		&lt;label class=&quot;ds-checkbox-custom ds-checkbox-inline ds-disabled&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option3&quot; disabled>
			&lt;span>Option 3 disabled&lt;/span>
		&lt;/label>
	&lt;/fieldset>
&lt;/form></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Checkboxes with Error</h3>
	<p>The <code class="language-markup">.ds-checkbox-group</code> class can be applied in addition to the <code class="language-markup">.ds-form-group</code> class for checkbox groups. This is necessary for class based validation on checkbox groups using the
		<code class="language-markup">.ds-text-help</code> class for error/success messages.</p>
	<div class="f-example">
		<form>
			<fieldset class="ds-form-group ds-checkbox-group ds-has-danger">
				<p class="ds-text-label">What is your jersey size? <span>(Required)</span></p>
				<p class="ds-text-help">This field is required.</p>
				<label class="ds-checkbox ds-checkbox-custom">
					<input type="checkbox" value="option1">
					<span>Small</span>
				</label>
				<label class="ds-checkbox ds-checkbox-custom">
					<input type="checkbox" value="option2">
					<span>Medium</span>
				</label>
				<label class="ds-checkbox ds-checkbox-custom">
					<input type="checkbox" value="option3">
					<span>Large</span>
				</label>
				<label class="ds-checkbox ds-checkbox-custom">
					<input type="checkbox" value="option4">
					<span>Extra Large</span>
				</label>
			</fieldset>
		</form>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;form>
	&lt;fieldset class=&quot;ds-form-group ds-checkbox-group ds-has-danger&quot;>
		&lt;p class=&quot;ds-text-label&quot;>What is your jersey size? &lt;span>(Required)&lt;/span>&lt;/p>
		&lt;p class=&quot;ds-text-help&quot;>This field is required.&lt;/p>
		&lt;label class=&quot;ds-checkbox ds-checkbox-custom&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option1&quot;>
			&lt;span>Small&lt;/span>
		&lt;/label>
		&lt;label class=&quot;ds-checkbox ds-checkbox-custom&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option2&quot;>
			&lt;span>Medium&lt;/span>
		&lt;/label>
		&lt;label class=&quot;ds-checkbox ds-checkbox-custom&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option3&quot;>
			&lt;span>Large&lt;/span>
		&lt;/label>
		&lt;label class=&quot;ds-checkbox ds-checkbox-custom&quot;>
			&lt;input type=&quot;checkbox&quot; value=&quot;option4&quot;>
			&lt;span>Extra Large&lt;/span>
		&lt;/label>
	&lt;/fieldset>
&lt;/form></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Image Cap Cards</h3>
	<div class="f-example">
		<div class="ds-card ds-card-image-cap" id="phantom-ds-card-image-cap">
			<img class="ds-card-img-top" data-src="" alt="Card image" src="http://placehold.it/780x480/777777/ffffff?text=Image+Cap">
			<div class="ds-card-block">
				<p class="ds-card-subtitle">Start Date - End Date</p>
				<h3 class="ds-card-title ds-h4">Promotion title</h3>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card ds-card-image-cap&quot;>
	&lt;img class=&quot;ds-card-img-top&quot; data-src=&quot;...&quot; alt=&quot;Card image&quot;>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;p class=&quot;ds-card-subtitle&quot;>Start Date - End Date&lt;/p>
		&lt;h3 class=&quot;ds-card-title ds-h4&quot;>Promotion title&lt;/h3>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<div class="ds-card" id="phantom-ds-card-content-type-image-title-text-button">
			<img class="ds-card-img-top" data-src="" alt="Card image cap" src="http://placehold.it/780x480/777777/ffffff?text=Image+Cap">
			<div class="ds-card-block">
				<h3 class="ds-card-title ds-h4">Card title</h3>
				<p class="ds-card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				<a href="#!" class="ds-btn ds-btn-primary-outline">Button</a>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card&quot;>
	&lt;img class=&quot;ds-card-img-top&quot; data-src=&quot;...&quot; alt=&quot;Card image cap&quot;>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;h3 class=&quot;ds-card-title ds-h4&quot;>Card title&lt;/h3>
		&lt;p class=&quot;ds-card-text&quot;>Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p>
		&lt;a href=&quot;#!&quot; class=&quot;ds-btn ds-btn-primary-outline&quot;>Button&lt;/a>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<div class="ds-card" id="phantom-ds-card-content-type-image-title-text-list-links">
			<img class="ds-card-img-top" data-src="" alt="Card image cap" src="http://placehold.it/780x480/777777/ffffff?text=Image+Cap">
			<div class="ds-card-block">
				<h3 class="ds-card-title ds-h4">Card title</h3>
				<p class="ds-card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			</div>
			<ul class="ds-list-group ds-list-group-flush">
				<li class="ds-list-group-item">Cras justo odio</li>
				<li class="ds-list-group-item">Dapibus ac facilisis in</li>
				<li class="ds-list-group-item">Vestibulum at eros</li>
			</ul>
			<div class="ds-card-block ds-card-block-btns">
				<a href="#!" class="ds-btn ds-btn-link">Card link</a>
				<a href="#!" class="ds-btn ds-btn-link">Another link</a>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card&quot;>
	&lt;img class=&quot;ds-card-img-top&quot; data-src=&quot;...&quot; alt=&quot;Card image cap&quot;>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;h3 class=&quot;ds-card-title ds-h4&quot;>Card title&lt;/h3>
		&lt;p class=&quot;ds-card-text&quot;>Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p>
	&lt;/div>
	&lt;ul class=&quot;ds-list-group ds-list-group-flush&quot;>
		&lt;li class=&quot;ds-list-group-item&quot;>Cras justo odio&lt;/li>
		&lt;li class=&quot;ds-list-group-item&quot;>Dapibus ac facilisis in&lt;/li>
		&lt;li class=&quot;ds-list-group-item&quot;>Vestibulum at eros&lt;/li>
	&lt;/ul>
	&lt;div class=&quot;ds-card-block ds-card-block-btns&quot;>
		&lt;a href=&quot;#!&quot; class=&quot;ds-btn ds-btn-link&quot;>Card link&lt;/a>
		&lt;a href=&quot;#!&quot; class=&quot;ds-btn ds-btn-link&quot;>Another link&lt;/a>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<div class="ds-card" id="phantom-ds-card-content-type-image-text">
			<img class="ds-card-img-top" data-src="" alt="Card image cap" src="http://placehold.it/780x480/777777/ffffff?text=Image+Cap">
			<div class="ds-card-block">
				<p class="ds-card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card&quot;>
	&lt;img class=&quot;ds-card-img-top&quot; data-src=&quot;...&quot; alt=&quot;Card image cap&quot;>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;p class=&quot;ds-card-text&quot;>Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Header and Footer</h3>
	<p>The featured card hero image with the momentum line mask requires a <code class="language-markup">.ds-card-header</code> as a direct child of the card and one within the content. The headers make use of Bootstrap's utilities class to show/hide between
		mobile and desktop.</p>

	<p>For IE9+ support as well as mobile coverage, the structure below is necessary to have the hero responsive and correctly sized across all browsers. The background image is set for desktop while the <code class="language-markup">img</code> tags nested
		inside are used for mobile.</p>

	<p>It is recommended to set fixed heights on this card or ensure heights are controlled via the content. The Design System <a href="https://github.com/JDRF/design-system/blob/master/src/scss/_cards.scss" target="_blank">has heights in place</a>, but can
		be overwritten in the project it's being used in.</p>

	<div class="f-example">
		<div class="ds-card ds-card-featured ds-card-featured-hero" id="phantom-ds-card-featured-hero">
			<div class="ds-card-header ds-hidden-md-up">Featured Promotion</div>
			<div class="ds-card-content-wrapper">
				<div class="ds-card-hero-block ds-card-hero-block-left">
					<div class="ds-card-hero-bg" style="background-image: url('http://placehold.it/780x480/777777/ffffff?text=Image+Cap');">
						<img src="http://placehold.it/780x480/777777/ffffff?text=Image+Cap" class="ds-hidden-md-up" />
					</div>
				</div>

				<div class="ds-card-hero-block ds-card-hero-block-right">
					<div class="ds-card-header ds-hidden-sm-down">Featured Promotion</div>
					<div class="ds-card-block">
						<h3 class="ds-card-title ds-h4">Alex and Ani Bracelet</h3>
						<p class="ds-card-subtitle">Start Date - End Date</p>
						<div class="ds-card-text">
							<p>Lorem ipsum purchase branded apparel and a wide range of merchandise to show your support—and raise awareness for JDRF.</p>
						</div>
					</div>
					<div class="ds-card-footer">
						<a href="#!" class="ds-btn ds-btn-link ds-hidden-sm-down">DETAILS</a>
						<a href="#!" class="ds-btn ds-btn-primary ds-hidden-md-up">DETAILS</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card ds-card-featured ds-card-featured-hero&quot; id=&quot;phantom-ds-card-featured-hero&quot;>
	&lt;div class=&quot;ds-card-header ds-hidden-md-up&quot;>Featured Promotion&lt;/div>
	&lt;div class=&quot;ds-card-content-wrapper&quot;>
		&lt;div class=&quot;ds-card-hero-block ds-card-hero-block-left&quot;>
			&lt;div class=&quot;ds-card-hero-bg&quot; style=&quot;background-image: url(&apos;http://placehold.it/780x480/777777/ffffff?text=Image+Cap&apos;);&quot;>
				&lt;img src=&quot;http://placehold.it/780x480/777777/ffffff?text=Image+Cap&quot; class=&quot;ds-hidden-md-up&quot;/>
			&lt;/div>
		&lt;/div>

		&lt;div class=&quot;ds-card-hero-block ds-card-hero-block-right&quot;>
			&lt;div class=&quot;ds-card-header ds-hidden-sm-down&quot;>Featured Promotion&lt;/div>
			&lt;div class=&quot;ds-card-block&quot;>
				&lt;h3 class=&quot;ds-card-title ds-h4&quot;>Alex and Ani Bracelet&lt;/h3>
				&lt;p class=&quot;ds-card-subtitle&quot;>Start Date - End Date&lt;/p>
				&lt;div class=&quot;ds-card-text&quot;>
					&lt;p>Lorem ipsum purchase branded apparel and a wide range of merchandise to show your support—and raise awareness for JDRF.&lt;/p>
				&lt;/div>
			&lt;/div>
			&lt;div class=&quot;ds-card-footer&quot;>
				&lt;a href=&quot;#!&quot; class=&quot;ds-btn ds-btn-link ds-hidden-sm-down&quot;>DETAILS&lt;/a>
				&lt;a href=&quot;#!&quot; class=&quot;ds-btn ds-btn-primary ds-hidden-md-up&quot;>DETAILS&lt;/a>
			&lt;/div>
		&lt;/div>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<div class="ds-card ds-card-featured" id="phantom-ds-card-featured">
			<div class="ds-card-header">
				Our partner's promotions make it easy for you to contribute
			</div>
			<div class="ds-card-hero-group">
				<div class="ds-card-hero-block ds-card-hero-block-1 ds-card-block">
					<img class="ds-card-img" data-src="" alt="Card image" src="http://placehold.it/780x480/777777/ffffff?text=Image">
				</div>
				<div class="ds-card-hero-block ds-card-hero-block-2 ds-card-block">
					<h3 class="ds-card-title ds-h4">Walgreen's Flu Shot</h3>
					<p class="ds-card-subtitle"><span class="material-icons" aria-hidden="true">date_range</span> October 10 - April 15</p>
					<p class="ds-card-subtitle"><span class="material-icons" aria-hidden="true">location_on</span> Mission St. Walgreens</p>
					<div class="ds-card-footer">
						<a href="#!" class="ds-btn ds-btn-primary">Learn More</a>
						<!-- social icons here -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card ds-card-featured&quot; id=&quot;phantom-ds-card-featured&quot;>
	&lt;div class=&quot;ds-card-header&quot;>
		Our partner&apos;s promotions make it easy for you to contribute
	&lt;/div>
	&lt;div class=&quot;ds-card-hero-group&quot;>
		&lt;div class=&quot;ds-card-hero-block ds-card-hero-block-1 ds-card-block&quot;>
			&lt;img class=&quot;ds-card-img&quot; data-src=&quot;&quot; alt=&quot;Card image&quot; src=&quot;http://placehold.it/780x480/777777/ffffff?text=Image&quot;>
		&lt;/div>
		&lt;div class=&quot;ds-card-hero-block ds-card-hero-block-2 ds-card-block&quot;>
			&lt;h3 class=&quot;ds-card-title ds-h4&quot;>Walgreen&apos;s Flu Shot&lt;/h3>
			&lt;p class=&quot;ds-card-subtitle&quot;>&lt;span class=&quot;material-icons&quot; aria-hidden=&quot;true&quot;>date_range&lt;/span> October 10 - April 15&lt;/p>
			&lt;p class=&quot;ds-card-subtitle&quot;>&lt;span class=&quot;material-icons&quot; aria-hidden=&quot;true&quot;>location_on&lt;/span> Mission St. Walgreens&lt;/p>
			&lt;div class=&quot;ds-card-footer&quot;>
				&lt;a href=&quot;#!&quot; class=&quot;ds-btn ds-btn-primary&quot;>Learn More&lt;/a>
				&lt;!-- social icons here -->
			&lt;/div>
		&lt;/div>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<div class="ds-card ds-card-content" id="phantom-ds-card-content-header-footer">
			<div class="ds-card-header">Details</div>
			<div class="ds-card-block ds-card-text-wrapper">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus lacus non porttitor bibendum. Nunc id eros vitae diam aliquam varius et eget urna. Nulla pulvinar porttitor lacus, eget dignissim est pellentesque nec. Quisque in volutpat quam. Quisque
					augue dui, rhoncus et mauris at, tincidunt rhoncus nisi. Proin sit amet tortor quis ligula molestie consectetur. Mauris nec ex dignissim, ultricies nunc sit amet, ullamcorper ex. Praesent in odio ac nulla consequat malesuada. Cum sociis natoque penatibus
					et magnis dis parturient montes, nascetur ridiculus mus.</p>

				<img class="ds-card-img ds-card-img-center" data-src="" alt="Card image" src="http://placehold.it/512x670/777777/ffffff?text=Image">
			</div>
			<div class="ds-card-footer ds-text-center">
				<a href="#!" class="ds-btn ds-btn-primary">Learn More</a>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card ds-card-content&quot;>
	&lt;div class=&quot;ds-card-header&quot;>Details&lt;/div>
	&lt;div class=&quot;ds-card-block ds-card-text-wrapper&quot;>
		&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus lacus non porttitor bibendum. Nunc id eros vitae diam aliquam varius et eget urna. Nulla pulvinar porttitor lacus, eget dignissim est pellentesque nec. Quisque in volutpat quam. Quisque augue dui, rhoncus et mauris at, tincidunt rhoncus nisi. Proin sit amet tortor quis ligula molestie consectetur. Mauris nec ex dignissim, ultricies nunc sit amet, ullamcorper ex. Praesent in odio ac nulla consequat malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p>

		&lt;img class=&quot;ds-card-img ds-card-img-center&quot; data-src=&quot;...&quot; alt=&quot;Card image&quot;>
	&lt;/div>
	&lt;div class=&quot;ds-card-footer ds-text-center&quot;>
		&lt;a href=&quot;#!&quot; class=&quot;ds-btn ds-btn-primary&quot;>Learn More&lt;/a>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<div class="ds-card ds-card-content" id="phantom-ds-card-content-header">
			<div class="ds-card-header">Location</div>
			<div class="ds-card-block">
				<img class="ds-card-img" data-src="" alt="Card image" src="http://placehold.it/780x480/777777/ffffff?text=Image">
			</div>
			<div class="ds-card-block">
				<div class="ds-text-address">
					<strong>Mission St. Walgreens</strong><br> 456 Mission St.<br> San Francisco, CA 94106<br>
					<a href="#!" class="ds-text-address-link">Directions <span class="material-icons" aria-hidden="true">launch</span></a>
				</div>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card ds-card-content&quot;>
	&lt;div class=&quot;ds-card-header&quot;>Location&lt;/div>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;img class=&quot;ds-card-img&quot; data-src=&quot;...&quot; alt=&quot;Card image&quot;>
	&lt;/div>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;div class=&quot;ds-text-address&quot;>
			&lt;strong>Mission St. Walgreens&lt;/strong>&lt;br>
			456 Mission St.&lt;br>
			San Francisco, CA 94106&lt;br>
			&lt;a href=&quot;#!&quot; class=&quot;ds-text-address-link&quot;>Directions &lt;span class=&quot;material-icons&quot; aria-hidden=&quot;true&quot;>launch&lt;/span>&lt;/a>
		&lt;/div>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<div class="ds-card" id="phantom-ds-card-content-type-title-subtitle-image-text-links">
			<div class="ds-card-block">
				<h3 class="ds-card-title ds-h4">Card title</h3>
				<p class="ds-card-subtitle">Support card subtitle</p>
			</div>
			<img class="ds-card-img-top" data-src="" alt="Card image" src="http://placehold.it/780x480/777777/ffffff?text=Image">
			<div class="ds-card-block">
				<p class="ds-card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			</div>
			<div class="ds-card-block ds-card-block-btns">
				<a href="#!" class="ds-btn ds-btn-link">Card link</a>
				<a href="#!" class="ds-btn ds-btn-link">Another link</a>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card&quot;>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;h3 class=&quot;ds-card-title ds-h4&quot;>Card title&lt;/h3>
		&lt;p class=&quot;ds-card-subtitle&quot;>Support card subtitle&lt;/p>
	&lt;/div>
	&lt;img data-src=&quot;...&quot; alt=&quot;Card image&quot;>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;p class=&quot;ds-card-text&quot;>Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p>
	&lt;/div>
	&lt;div class=&quot;ds-card-block ds-card-block-btns&quot;>
		&lt;a href=&quot;#&quot; class=&quot;ds-btn ds-btn-link&quot;>Card link&lt;/a>
		&lt;a href=&quot;#&quot; class=&quot;ds-btn ds-btn-link&quot;>Another link&lt;/a>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<div class="ds-card" id="phantom-ds-card-content-type-title-text-links">
			<div class="ds-card-block">
				<h3 class="ds-card-title">Card title</h3>
				<p class="ds-card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			</div>
			<div class="ds-card-block ds-card-block-btns">
				<a href="#!" class="ds-btn ds-btn-link">Card link</a>
				<a href="#!" class="ds-btn ds-btn-link">Another link</a>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card&quot;>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;h3 class=&quot;ds-card-title&quot;>Card title&lt;/h3>
		&lt;p class=&quot;ds-card-text&quot;>Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p>
	&lt;/div>
	&lt;div class=&quot;ds-card-block ds-card-block-btns&quot;>
		&lt;a href=&quot;#!&quot; class=&quot;ds-btn ds-btn-link&quot;>Card link&lt;/a>
		&lt;a href=&quot;#!&quot; class=&quot;ds-btn ds-btn-link&quot;>Another link&lt;/a>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<div class="ds-card ds-card-program" id="phantom-ds-card-content-type-program">
			<div class="ds-card-block ds-card-block-1">
				<p class="ds-card-subtitle">MAY 4</p>
				<h3 class="ds-card-title">Adult Type 1 and Type 1.5 Diabetes Support Group</h3>
				<p class="ds-card-location"><span class="material-icons" aria-hidden="true">location_on</span> Kaiser Hospital, Santa Rosa, CA</p>
			</div>
			<div class="ds-card-block ds-card-block-2">
				<div class="ds-card-category">Support</div>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-card ds-card-program&quot;>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;h4 class=&quot;ds-card-subtitle&quot;>MAY 4&lt;/h4>
		&lt;h2 class=&quot;ds-card-title&quot;>Adult Type 1 and Type 1.5 Diabetes Support Group&lt;/h2>
		&lt;p class=&quot;ds-card-location&quot;>&lt;span class=&quot;material-icons&quot; aria-hidden=&quot;true&quot;>location_on&lt;/span> Kaiser Hospital, Santa Rosa, CA&lt;/p>
	&lt;/div>
	&lt;div class=&quot;ds-card-block&quot;>
		&lt;div class=&quot;ds-card-category&quot;>Support&lt;/div>
	&lt;/div>
&lt;/div></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Sidebar: Single Level</h3>
	<div class="f-example">
		<ul class="ds-nav ds-sidebar" id="phantom-sidebar-single">
			<li class="ds-nav-item">
				<a class="ds-nav-link ds-current" href="#!">Current Parent</a>
			</li>
			<li class="ds-nav-item">
				<a class="ds-nav-link" href="#!">Parent Link</a>
			</li>
			<li class="ds-nav-item">
				<a class="ds-nav-link" href="#!">Parent Link</a>
			</li>
			<li class="ds-nav-item">
				<a class="ds-nav-link" href="#!">Parent Link</a>
			</li>
		</ul>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;ul class=&quot;ds-nav ds-sidebar&quot;>
	&lt;li class=&quot;ds-nav-item&quot;>
		&lt;a class=&quot;ds-nav-link current&quot; href=&quot;#!&quot;>Current Parent&lt;/a>
	&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>
		&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Parent Link&lt;/a>
	&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>
		&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Parent Link&lt;/a>
	&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>
		&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Parent Link&lt;/a>
	&lt;/li>
&lt;/ul>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Sidebar: Two Levels</h3>
	<p>By default, all child menus are collapsed. To enable these by default, add the `.ds-nav-show` class. If you wish to show the class using a JavaScript interaction, add the '.ds-current' class to the child menu.</p>
	<div class="f-example">
		<ul class="ds-nav ds-sidebar" id="phantom-sidebar-two">
			<li class="ds-nav-item">
				<a class="ds-nav-link" href="#!">Parent Link</a>
				<ul class="ds-nav">
					<li class="ds-nav-item">
						<a class="ds-nav-link" href="#!">Current Child</a>
					</li>
					<li class="ds-nav-item">
						<a class="ds-nav-link" href="#!">Child Link</a>
					</li>
					<li class="ds-nav-item">
						<a class="ds-nav-link" href="#!">Child Link</a>
					</li>
				</ul>
			</li>
			<li class="ds-nav-item">
				<a class="ds-nav-link" href="#!">Parent Link</a>
				<ul class="ds-nav ds-current">
					<li class="ds-nav-item">
						<a class="ds-nav-link ds-current" href="#!">Current Child</a>
					</li>
					<li class="ds-nav-item">
						<a class="ds-nav-link" href="#!">Child Link</a>
					</li>
					<li class="ds-nav-item">
						<a class="ds-nav-link" href="#!">Child Link</a>
					</li>
				</ul>
			</li>
			<li class="ds-nav-item">
				<a class="ds-nav-link" href="#!">Parent Link</a>
				<ul class="ds-nav ds-nav-show">
					<li class="ds-nav-item">
						<a class="ds-nav-link" href="#!">Current Child</a>
					</li>
					<li class="ds-nav-item">
						<a class="ds-nav-link" href="#!">Child Link</a>
					</li>
					<li class="ds-nav-item">
						<a class="ds-nav-link" href="#!">Child Link</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;ul class=&quot;ds-nav ds-sidebar&quot;>
	&lt;li class=&quot;ds-nav-item&quot;>
		&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Parent Link&lt;/a>
		&lt;ul class=&quot;ds-nav&quot;>
			&lt;li class=&quot;ds-nav-item&quot;>
				&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Current Child&lt;/a>
			&lt;/li>
			&lt;li class=&quot;ds-nav-item&quot;>
				&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Child Link&lt;/a>
			&lt;/li>
			&lt;li class=&quot;ds-nav-item&quot;>
				&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Child Link&lt;/a>
			&lt;/li>
		&lt;/ul>
	&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>
		&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Parent Link&lt;/a>
		&lt;ul class=&quot;ds-nav ds-current&quot;>
			&lt;li class=&quot;ds-nav-item&quot;>
				&lt;a class=&quot;ds-nav-link ds-current&quot; href=&quot;#!&quot;>Current Child&lt;/a>
			&lt;/li>
			&lt;li class=&quot;ds-nav-item&quot;>
				&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Child Link&lt;/a>
			&lt;/li>
			&lt;li class=&quot;ds-nav-item&quot;>
				&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Child Link&lt;/a>
			&lt;/li>
		&lt;/ul>
	&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>
		&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Parent Link&lt;/a>
		&lt;ul class=&quot;ds-nav ds-nav-show&quot;>
			&lt;li class=&quot;ds-nav-item&quot;>
				&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Current Child&lt;/a>
			&lt;/li>
			&lt;li class=&quot;ds-nav-item&quot;>
				&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Child Link&lt;/a>
			&lt;/li>
			&lt;li class=&quot;ds-nav-item&quot;>
				&lt;a class=&quot;ds-nav-link&quot; href=&quot;#!&quot;>Child Link&lt;/a>
			&lt;/li>
		&lt;/ul>
	&lt;/li>
&lt;/ul>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Outline</h3>
	<div class="f-example">
		<h3>Heading Three <span class="ds-label ds-label-outline">10</span></h3>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;h3>Heading Three &lt;span class=&quot;ds-label ds-label-outline&quot;>10&lt;/span>&lt;/h3></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Solid</h3>
	<div class="f-example">
		<h3>Heading Three <span class="ds-label ds-label-default">10</span></h3>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;h3>Heading Three &lt;span class=&quot;ds-label ds-label-default&quot;>10&lt;/span>&lt;/h3></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Sizes</h3>
	<p>The Badge type size is 75% of the heading type size.</p>
	<div class="f-example">
		<h1>Heading One <span class="ds-label ds-label-outline">10</span></h1>
		<h2>Heading Two <span class="ds-label ds-label-outline">10</span></h2>
		<h3>Heading Three <span class="ds-label ds-label-outline">10</span></h3>
		<h4>Heading Four <span class="ds-label ds-label-outline">10</span></h4>
		<h5>Heading Five <span class="ds-label ds-label-outline">10</span></h5>
		<h6>Heading Six <span class="ds-label ds-label-outline">10</span></h6>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;h1>Heading One &lt;span class=&quot;ds-label ds-label-outline&quot;>10&lt;/span>&lt;/h1>
&lt;h2>Heading Two &lt;span class=&quot;ds-label ds-label-outline&quot;>10&lt;/span>&lt;/h2>
&lt;h3>Heading Three &lt;span class=&quot;ds-label ds-label-outline&quot;>10&lt;/span>&lt;/h3>
&lt;h4>Heading Four &lt;span class=&quot;ds-label ds-label-outline&quot;>10&lt;/span>&lt;/h4>
&lt;h5>Heading Five &lt;span class=&quot;ds-label ds-label-outline&quot;>10&lt;/span>&lt;/h5>
&lt;h6>Heading Six &lt;span class=&quot;ds-label ds-label-outline&quot;>10&lt;/span>&lt;/h6></code></pre>
</section>

<section class="f-section">
	<div class="f-example">
		<h1>Heading One <span class="ds-label ds-label-default">10</span></h1>
		<h2>Heading Two <span class="ds-label ds-label-default">10</span></h2>
		<h3>Heading Three <span class="ds-label ds-label-default">10</span></h3>
		<h4>Heading Four <span class="ds-label ds-label-default">10</span></h4>
		<h5>Heading Five <span class="ds-label ds-label-default">10</span></h5>
		<h6>Heading Six <span class="ds-label ds-label-default">10</span></h6>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;h1>Heading One &lt;span class=&quot;ds-label ds-label-solid&quot;>10&lt;/span>&lt;/h1>
&lt;h2>Heading Two &lt;span class=&quot;ds-label ds-label-solid&quot;>10&lt;/span>&lt;/h2>
&lt;h3>Heading Three &lt;span class=&quot;ds-label ds-label-solid&quot;>10&lt;/span>&lt;/h3>
&lt;h4>Heading Four &lt;span class=&quot;ds-label ds-label-solid&quot;>10&lt;/span>&lt;/h4>
&lt;h5>Heading Five &lt;span class=&quot;ds-label ds-label-solid&quot;>10&lt;/span>&lt;/h5>
&lt;h6>Heading Six &lt;span class=&quot;ds-label ds-label-solid&quot;>10&lt;/span>&lt;/h6></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Variations</h3>
	<div class="f-example">
		<ul class="ds-nav ds-nav-pills">
			<li class="ds-nav-item"><a href="#!" class="ds-nav-link ds-h6">Heading Six <span class="ds-label ds-label-outline">1</span></a></li>
			<li class="ds-nav-item"><a href="#!" class="ds-nav-link ds-h6">Heading Six <span class="ds-label ds-label-outline">10</span></a></li>
			<li class="ds-nav-item"><a href="#!" class="ds-nav-link ds-h6">Heading Six <span class="ds-label ds-label-outline">Label</span></a></li>
			<li class="ds-nav-item"><a href="#!" class="ds-nav-link ds-h6">Heading Six <span class="ds-label ds-label-outline">Long Label</span></a></li>
		</ul>
		<ul class="ds-nav ds-nav-pills">
			<li class="ds-nav-item"><a href="#!" class="ds-nav-link ds-btn ds-btn-primary">Primary <span class="ds-label ds-label-default">10</span></a></li>
			<li class="ds-nav-item"><a href="#!" class="ds-nav-link ds-btn ds-btn-primary-outline">Outline <span class="ds-label ds-label-default">10</span></a></li>
			<li class="ds-nav-item"><a href="#!" class="ds-nav-link ds-btn ds-btn-flat">Flat <span class="ds-label ds-label-default">10</span></a></li>
			<li class="ds-nav-item"><a href="#!" class="ds-nav-link ds-btn ds-btn-link">Text <span class="ds-label ds-label-default">10</span></a></li>
		</ul>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;ul class=&quot;ds-nav ds-nav-pills&quot;>
	&lt;li class=&quot;ds-nav-item&quot;>&lt;a href=&quot;#&quot; class=&quot;ds-nav-link ds-h6&quot;>Heading Six &lt;span class=&quot;ds-label ds-label-outline&quot;>1&lt;/span>&lt;/a>&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>&lt;a href=&quot;#&quot; class=&quot;ds-nav-link ds-h6&quot;>Heading Six &lt;span class=&quot;ds-label ds-label-outline&quot;>10&lt;/span>&lt;/a>&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>&lt;a href=&quot;#&quot; class=&quot;ds-nav-link ds-h6&quot;>Heading Six &lt;span class=&quot;ds-label ds-label-outline&quot;>Label&lt;/span>&lt;/a>&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>&lt;a href=&quot;#&quot; class=&quot;ds-nav-link ds-h6&quot;>Heading Six &lt;span class=&quot;ds-label ds-label-outline&quot;>Long Label&lt;/span>&lt;/a>&lt;/li>
&lt;/ul>
&lt;ul class=&quot;ds-nav ds-nav-pills&quot;>
	&lt;li class=&quot;ds-nav-item&quot;>&lt;a href=&quot;#&quot; class=&quot;ds-nav-link ds-btn ds-btn-primary&quot;>Primary &lt;span class=&quot;ds-label ds-label-default&quot;>10&lt;/span>&lt;/a>&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>&lt;a href=&quot;#&quot; class=&quot;ds-nav-link ds-btn ds-btn-primary-outline&quot;>Outline &lt;span class=&quot;ds-label ds-label-default&quot;>10&lt;/span>&lt;/a>&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>&lt;a href=&quot;#&quot; class=&quot;ds-nav-link ds-btn ds-btn-flat&quot;>Flat &lt;span class=&quot;ds-label ds-label-default&quot;>10&lt;/span>&lt;/a>&lt;/li>
	&lt;li class=&quot;ds-nav-item&quot;>&lt;a href=&quot;#&quot; class=&quot;ds-nav-link ds-btn ds-btn-link&quot;>Text &lt;span class=&quot;ds-label ds-label-default&quot;>10&lt;/span>&lt;/a>&lt;/li>
&lt;/ul>
</code></pre>
</section>