Dosis

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: $dosis;

Open-sans

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: $open-sans;

Open-sans-condensed

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: $open-sans-condensed;

Lobster

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: $lobster;

Signika

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: $signika;

background-color: $product-light;
background-color: $product-major;
background-color: $product-dark;
background-color: $service-light;
background-color: $service-major;
background-color: $service-dark;
background-color: $transactional-light;
background-color: $transactional-major;
background-color: $transactional-dark;
background-color: $relational-light;
background-color: $relational-major;
background-color: $relational-dark;
background-color: $alert-light;
background-color: $alert-major;
background-color: $alert-dark;
background-color: $pink-light;
background-color: $pink-major;
background-color: $pink-dark;
background-color: $gray-deep-darker;
background-color: $gray-deep-dark;
background-color: $gray-deep-light;
background-color: $gray-deep-lighter;
background-color: $gray-major-darker;
background-color: $gray-major-dark;
background-color: $gray-major-light;
background-color: $gray-major-lighter;
background-color: $gray-soft-darker;
background-color: $gray-soft-dark;
background-color: $gray-soft-light;
background-color: $gray-soft-lighter;
background-color: $meat;
background-color: $starchy;
background-color: $fish;
background-color: $egg;
background-color: $veggie;
background-color: $breakfast;
background-color: $desserts;
background-color: $smoothies;

Various

@include button-icon($dn-icon-plus, $product-major, $large, $label:light)

Large (dark)

@include button-icon($dn-icon-check, $product-major, $large, $label:dark)

Large (light)

@include button-icon($dn-icon-check, $product-major, $large)

Medium (dark)

@include button-icon($dn-icon-check, $product-major, $label:dark)

Medium (light)

@include button-icon($dn-icon-check, $product-major)

Small (dark)

@include button-icon($dn-icon-check, $product-major, $small, $label:dark)

Small (light)

@include button-icon($dn-icon-check, $product-major, $small)

Input with label as placeholder

<span class="input-label-placeholder">
	<input id="addItemToList" type="text">
	<label for="addItemToList">Add an item to your list</label>
</span>
		

Input with label as placeholder with submit button

<span class="input-label-placeholder">
	<input id="addItemToList" class="" type="text">
	<label for="addItemToList">Add an item to your list</label>
	<button class="shopping-list__add-submit">
		<span>Add the item</span>
	</button>
</span>

Input checkbox rounded filled

<span class="round-check--filled">
	<input id="ingredient-itemID1-bought" type="checkbox" name="bought"  aria-labeledby="ingredient-itemID1-info" checked">
	<label class="shopping-list__bought_label" for="ingredient-itemID1-bought">
		<span>Ingredient bought</span>
	</label>
</span>

Input Number

1 g
<span class="input-number">
	<span class="input-number__value">
		<input id="ingredient-12" type="number" name="quantity" data-unit=" g" value="1" min="0" aria-labeledby="ingredient-12-info" />
		<span class="input-number__value_display">1 g</span>
	</span>
	<button type="button" class="input-number__control input-number__control_less" data-step="down" aria-label="decrease quantity" aria-controls="ingredient-12">&minus;</button>
	<button type="button" class="input-number__control input-number__control_more" data-step="up" aria-label="increase quantity" aria-controls="ingredient-12">+</button>
</span>

Works also without unit if data-unit attribute is empty or not present


Reste a mettre cette partie à jour.



-> Click here for full list of possibilities
0%

Select markup HTML :

Auto init Select2 JS :

@include add-dn-icon($icon);