Activity Items

Introduced : 0.6.7

Updated :

Usage : `{{> activity-items }}`

Options :

activityobject Object
- username
- avatar
- verb
- date
- media-title
- media-type

<div class="media activity-item">
	<div class="media-left media-middle">
		<a href="./profile-person.html">
			<img src="" alt="" class="media-object" />
		</a>
	</div>
	<div class="media-body">
		<h5 class="media-heading">
     <a href="./profile-person.html"></a>
     
     <a href="./detail.html"></a>
   </h5>
		<span></span>
	</div>
	<div class="media-right">
		<a href="./detail.html">
			<div class="no-thumbnail">
				<span class="media-icon icons icons-"></span>
			</div>
		</a>
	</div>
</div>

Alert

Introduced : 0.4.1

Updated : 0.5.3

Usage : `{{> alert }}`

Options :

alert-variant - String (success, warning, danger) info by default
alert-message - String

Coucou! Ceci est une alerte qui sert à afficher un message super important !

<div class="alert alert-info alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	<div class="alert-message">
		<strong>Coucou!</strong> Ceci est une alerte qui sert à afficher un message super important !
	</div>
</div>

Alert Danger

Introduced : 0.4.1

Updated : -

Usage : `{{> alert-danger }}`

Oups, une erreur s'est produite

<div class="alert alert-danger alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	<div class="alert-message">
		<i class='icons icons-flash'></i> Oups, une erreur s'est produite
	</div>
</div>

Alert Info

Introduced : 0.5.1

Updated : -

Usage : `{{> alert-info }}`

Juste pour information, tout se passe bien

<div class="alert alert-info alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	<div class="alert-message">
		<i class='icons icons-info-sign'></i> Juste pour information, tout se passe bien
	</div>
</div>

Alert Success

Introduced : 0.4.1

Updated : -

Usage : `{{> alert-success }}`

Votre opération s'est déroulée avec succès !

<div class="alert alert-success alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	<div class="alert-message">
		<i class='icons icons-ok'></i> Votre opération s'est déroulée avec succès !
	</div>
</div>

Alert Warning

Introduced : 0.4.1

Updated : -

Usage : `{{> alert-warning }}`

Attention, quelque chose se trame !

<div class="alert alert-warning alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	<div class="alert-message">
		<i class='icons icons-alert'></i> Attention, quelque chose se trame !
	</div>
</div>

Axis

Introduced : 0.6.0

Usage : `{{> axis }}`

Événements Lieux Personnalités Vie quotidienne

<div class="axis">
	<a href="#" class="axis-element">
		<span>
      Événements
    </span>
	</a>
	<a href="#" class="axis-element">
		<span>
      Lieux
    </span>
	</a>
	<a href="#" class="axis-element">
		<span>
      Personnalités
    </span>
	</a>
	<a href="#" class="axis-element">
		<span>
      Vie quotidienne
    </span>
	</a>
</div>

Comment

Introduced : 0.1.1

Updated : 0.3.1

Usage : `{{> comment }}`

Options :

comment-object - Object

Martine Desarzens le 5 mars 2013

Avez-vous connu, Nicolas, les si jolis petits cartons dans lesquels nous placions délicatement les fleurs de mai que nous envoyions par la poste à notre famille.

<div class="comment">
	<a href="#">
		<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2015/08/876988c033485ccc_jpg_168x168_crop_q85.jpg" alt="Martine Desarzens" class="img-responsive img-circle" />
	</a>
	<h5>
    <a href="#">Martine Desarzens</a>
    <span class="text-clear">le 5 mars 2013</span>
  </h5>
	<div class="comment-content">
		Avez-vous connu, Nicolas, les si jolis petits cartons dans lesquels nous placions délicatement les fleurs de mai que nous envoyions par la poste à notre famille.
	</div>
</div>

Conversation

Introduced : 0.6.7

Updated :

Usage : `{{> conversation }}`

Options :

activityobject Object username avatar message-intro date

–

...

<a href="inbox-conversation.html" class="conversation-item">
	<div class="row">
		<div class="col-xs-1">
			<div class="list-item-flex-center">
				<div class="form-group">
					<input type="checkbox" name="name" value="" class="form-control">
				</div>
			</div>
		</div>
		<div class="col-xs-9">
			<div class="media">
				<div class="media-left">
					<img src="" alt="" class="media-object" />
				</div>
				<div class="media-body">
					<b></b> – <small></small>
					<h5 class="media-heading">
             ...
          </h5>
				</div>
			</div>
		</div>
		<div class="col-xs-1 col-sm-2">
			<div class="list-item-flex-right list-item-flex-center">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</div>
		</div>
	</div>
</a>

Date Field

Introduced : 0.1.7

Updated : -

Usage : `{{> date-field }}`

Options :

birthdate - boolean

<div class="row">
	<div class="col-xs-4">
		<select name="day" id="day" class="form-control">
			<option value="" selected="selected">-</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>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="23">23</option>
			<option value="24">24</option>
			<option value="25">25</option>
			<option value="26">26</option>
			<option value="27">27</option>
			<option value="28">28</option>
			<option value="29">29</option>
			<option value="30">30</option>
			<option value="31">31</option>
		</select>
	</div>
	<div class="col-xs-4">
		<select name="month" class="form-control">
			<option value="" selected="selected">-</option>
			<option value="1">janvier</option>
			<option value="2">février</option>
			<option value="3">mars</option>
			<option value="4">avril</option>
			<option value="5">mai</option>
			<option value="6">juin</option>
			<option value="7">juillet</option>
			<option value="8">août</option>
			<option value="9">septembre</option>
			<option value="10">octobre</option>
			<option value="11">novembre</option>
			<option value="12">décembre</option>
		</select>
	</div>
	<div class="col-xs-4">
		<select name="year" id="year" class="form-control">
			<option value="" selected="selected">-</option>
			<option value="2016">2016</option>
			<option value="2015">2015</option>
			<option value="2014">2014</option>
			<option value="2013">2013</option>
			<option value="2012">2012</option>
			<option value="2011">2011</option>
			<option value="2010">2010</option>
			<option value="2009">2009</option>
			<option value="2008">2008</option>
			<option value="2007">2007</option>
			<option value="2006">2006</option>
			<option value="2005">2005</option>
			<option value="2004">2004</option>
			<option value="2003">2003</option>
			<option value="2002">2002</option>
			<option value="2001">2001</option>
			<option value="2000">2000</option>
			<option value="1999">1999</option>
			<option value="1998">1998</option>
			<option value="1997">1997</option>
			<option value="1996">1996</option>
			<option value="1995">1995</option>
			<option value="1994">1994</option>
			<option value="1993">1993</option>
			<option value="1992">1992</option>
			<option value="1991">1991</option>
			<option value="1990">1990</option>
			<option value="1989">1989</option>
			<option value="1988">1988</option>
			<option value="1987">1987</option>
			<option value="1986">1986</option>
			<option value="1985">1985</option>
			<option value="1984">1984</option>
			<option value="1983">1983</option>
			<option value="1982">1982</option>
			<option value="1981">1981</option>
			<option value="1980">1980</option>
			<option value="1979">1979</option>
			<option value="1978">1978</option>
			<option value="1977">1977</option>
			<option value="1976">1976</option>
			<option value="1975">1975</option>
			<option value="1974">1974</option>
			<option value="1973">1973</option>
			<option value="1972">1972</option>
			<option value="1971">1971</option>
			<option value="1970">1970</option>
			<option value="1969">1969</option>
			<option value="1968">1968</option>
			<option value="1967">1967</option>
			<option value="1966">1966</option>
			<option value="1965">1965</option>
			<option value="1964">1964</option>
			<option value="1963">1963</option>
			<option value="1962">1962</option>
			<option value="1961">1961</option>
			<option value="1960">1960</option>
			<option value="1959">1959</option>
			<option value="1958">1958</option>
			<option value="1957">1957</option>
			<option value="1956">1956</option>
			<option value="1955">1955</option>
			<option value="1954">1954</option>
			<option value="1953">1953</option>
			<option value="1952">1952</option>
			<option value="1951">1951</option>
			<option value="1950">1950</option>
			<option value="1949">1949</option>
			<option value="1948">1948</option>
			<option value="1947">1947</option>
			<option value="1946">1946</option>
			<option value="1945">1945</option>
			<option value="1944">1944</option>
			<option value="1943">1943</option>
			<option value="1942">1942</option>
			<option value="1941">1941</option>
			<option value="1940">1940</option>
			<option value="1939">1939</option>
			<option value="1938">1938</option>
			<option value="1937">1937</option>
			<option value="1936">1936</option>
			<option value="1935">1935</option>
			<option value="1934">1934</option>
			<option value="1933">1933</option>
			<option value="1932">1932</option>
			<option value="1931">1931</option>
			<option value="1930">1930</option>
			<option value="1929">1929</option>
			<option value="1928">1928</option>
			<option value="1927">1927</option>
			<option value="1926">1926</option>
			<option value="1925">1925</option>
			<option value="1924">1924</option>
			<option value="1923">1923</option>
			<option value="1922">1922</option>
			<option value="1921">1921</option>
			<option value="1920">1920</option>
			<option value="1919">1919</option>
			<option value="1918">1918</option>
			<option value="1917">1917</option>
			<option value="1916">1916</option>
			<option value="1915">1915</option>
			<option value="1914">1914</option>
			<option value="1913">1913</option>
			<option value="1912">1912</option>
			<option value="1911">1911</option>
			<option value="1910">1910</option>
			<option value="1909">1909</option>
			<option value="1908">1908</option>
			<option value="1907">1907</option>
			<option value="1906">1906</option>
			<option value="1905">1905</option>
			<option value="1904">1904</option>
			<option value="1903">1903</option>
			<option value="1902">1902</option>
			<option value="1901">1901</option>
			<option value="1900">1900</option>
			<option value="1899">1899</option>
			<option value="1898">1898</option>
			<option value="1897">1897</option>
			<option value="1896">1896</option>
			<option value="1895">1895</option>
			<option value="1894">1894</option>
			<option value="1893">1893</option>
			<option value="1892">1892</option>
			<option value="1891">1891</option>
			<option value="1890">1890</option>
			<option value="1889">1889</option>
			<option value="1888">1888</option>
			<option value="1887">1887</option>
			<option value="1886">1886</option>
			<option value="1885">1885</option>
			<option value="1884">1884</option>
			<option value="1883">1883</option>
			<option value="1882">1882</option>
			<option value="1881">1881</option>
			<option value="1880">1880</option>
			<option value="1879">1879</option>
			<option value="1878">1878</option>
			<option value="1877">1877</option>
			<option value="1876">1876</option>
			<option value="1875">1875</option>
			<option value="1874">1874</option>
			<option value="1873">1873</option>
			<option value="1872">1872</option>
			<option value="1871">1871</option>
			<option value="1870">1870</option>
			<option value="1869">1869</option>
			<option value="1868">1868</option>
			<option value="1867">1867</option>
			<option value="1866">1866</option>
			<option value="1865">1865</option>
			<option value="1864">1864</option>
			<option value="1863">1863</option>
			<option value="1862">1862</option>
			<option value="1861">1861</option>
			<option value="1860">1860</option>
			<option value="1859">1859</option>
			<option value="1858">1858</option>
			<option value="1857">1857</option>
			<option value="1856">1856</option>
			<option value="1855">1855</option>
			<option value="1854">1854</option>
			<option value="1853">1853</option>
			<option value="1852">1852</option>
			<option value="1851">1851</option>
			<option value="1850">1850</option>
			<option value="1849">1849</option>
			<option value="1848">1848</option>
			<option value="1847">1847</option>
			<option value="1846">1846</option>
			<option value="1845">1845</option>
			<option value="1844">1844</option>
			<option value="1843">1843</option>
			<option value="1842">1842</option>
			<option value="1841">1841</option>
			<option value="1840">1840</option>
			<option value="1839">1839</option>
			<option value="1838">1838</option>
			<option value="1837">1837</option>
			<option value="1836">1836</option>
			<option value="1835">1835</option>
			<option value="1834">1834</option>
			<option value="1833">1833</option>
			<option value="1832">1832</option>
			<option value="1831">1831</option>
			<option value="1830">1830</option>
			<option value="1829">1829</option>
			<option value="1828">1828</option>
			<option value="1827">1827</option>
			<option value="1826">1826</option>
			<option value="1825">1825</option>
			<option value="1824">1824</option>
			<option value="1823">1823</option>
			<option value="1822">1822</option>
			<option value="1821">1821</option>
			<option value="1820">1820</option>
			<option value="1819">1819</option>
			<option value="1818">1818</option>
			<option value="1817">1817</option>
			<option value="1816">1816</option>
			<option value="1815">1815</option>
			<option value="1814">1814</option>
			<option value="1813">1813</option>
			<option value="1812">1812</option>
			<option value="1811">1811</option>
			<option value="1810">1810</option>
			<option value="1809">1809</option>
			<option value="1808">1808</option>
			<option value="1807">1807</option>
			<option value="1806">1806</option>
			<option value="1805">1805</option>
			<option value="1804">1804</option>
			<option value="1803">1803</option>
			<option value="1802">1802</option>
			<option value="1801">1801</option>
			<option value="1800">1800</option>
			<option value="1799">1799</option>
			<option value="1798">1798</option>
			<option value="1797">1797</option>
			<option value="1796">1796</option>
			<option value="1795">1795</option>
			<option value="1794">1794</option>
			<option value="1793">1793</option>
			<option value="1792">1792</option>
			<option value="1791">1791</option>
			<option value="1790">1790</option>
			<option value="1789">1789</option>
			<option value="1788">1788</option>
			<option value="1787">1787</option>
			<option value="1786">1786</option>
			<option value="1785">1785</option>
			<option value="1784">1784</option>
			<option value="1783">1783</option>
			<option value="1782">1782</option>
			<option value="1781">1781</option>
			<option value="1780">1780</option>
			<option value="1779">1779</option>
			<option value="1778">1778</option>
			<option value="1777">1777</option>
			<option value="1776">1776</option>
			<option value="1775">1775</option>
			<option value="1774">1774</option>
			<option value="1773">1773</option>
			<option value="1772">1772</option>
			<option value="1771">1771</option>
			<option value="1770">1770</option>
			<option value="1769">1769</option>
			<option value="1768">1768</option>
			<option value="1767">1767</option>
			<option value="1766">1766</option>
			<option value="1765">1765</option>
			<option value="1764">1764</option>
			<option value="1763">1763</option>
			<option value="1762">1762</option>
			<option value="1761">1761</option>
			<option value="1760">1760</option>
			<option value="1759">1759</option>
			<option value="1758">1758</option>
			<option value="1757">1757</option>
			<option value="1756">1756</option>
			<option value="1755">1755</option>
			<option value="1754">1754</option>
			<option value="1753">1753</option>
			<option value="1752">1752</option>
			<option value="1751">1751</option>
			<option value="1750">1750</option>
			<option value="1749">1749</option>
			<option value="1748">1748</option>
			<option value="1747">1747</option>
			<option value="1746">1746</option>
			<option value="1745">1745</option>
			<option value="1744">1744</option>
			<option value="1743">1743</option>
			<option value="1742">1742</option>
			<option value="1741">1741</option>
			<option value="1740">1740</option>
			<option value="1739">1739</option>
			<option value="1738">1738</option>
			<option value="1737">1737</option>
			<option value="1736">1736</option>
			<option value="1735">1735</option>
			<option value="1734">1734</option>
			<option value="1733">1733</option>
			<option value="1732">1732</option>
			<option value="1731">1731</option>
			<option value="1730">1730</option>
			<option value="1729">1729</option>
			<option value="1728">1728</option>
			<option value="1727">1727</option>
			<option value="1726">1726</option>
			<option value="1725">1725</option>
			<option value="1724">1724</option>
			<option value="1723">1723</option>
			<option value="1722">1722</option>
			<option value="1721">1721</option>
			<option value="1720">1720</option>
			<option value="1719">1719</option>
			<option value="1718">1718</option>
			<option value="1717">1717</option>
			<option value="1716">1716</option>
			<option value="1715">1715</option>
			<option value="1714">1714</option>
			<option value="1713">1713</option>
			<option value="1712">1712</option>
			<option value="1711">1711</option>
			<option value="1710">1710</option>
			<option value="1709">1709</option>
			<option value="1708">1708</option>
			<option value="1707">1707</option>
			<option value="1706">1706</option>
			<option value="1705">1705</option>
			<option value="1704">1704</option>
			<option value="1703">1703</option>
			<option value="1702">1702</option>
			<option value="1701">1701</option>
			<option value="1700">1700</option>
			<option value="1699">1699</option>
			<option value="1698">1698</option>
			<option value="1697">1697</option>
			<option value="1696">1696</option>
			<option value="1695">1695</option>
			<option value="1694">1694</option>
			<option value="1693">1693</option>
			<option value="1692">1692</option>
			<option value="1691">1691</option>
			<option value="1690">1690</option>
			<option value="1689">1689</option>
			<option value="1688">1688</option>
			<option value="1687">1687</option>
			<option value="1686">1686</option>
			<option value="1685">1685</option>
			<option value="1684">1684</option>
			<option value="1683">1683</option>
			<option value="1682">1682</option>
			<option value="1681">1681</option>
			<option value="1680">1680</option>
			<option value="1679">1679</option>
			<option value="1678">1678</option>
			<option value="1677">1677</option>
			<option value="1676">1676</option>
			<option value="1675">1675</option>
			<option value="1674">1674</option>
			<option value="1673">1673</option>
			<option value="1672">1672</option>
			<option value="1671">1671</option>
			<option value="1670">1670</option>
			<option value="1669">1669</option>
			<option value="1668">1668</option>
			<option value="1667">1667</option>
			<option value="1666">1666</option>
			<option value="1665">1665</option>
			<option value="1664">1664</option>
			<option value="1663">1663</option>
			<option value="1662">1662</option>
			<option value="1661">1661</option>
			<option value="1660">1660</option>
			<option value="1659">1659</option>
			<option value="1658">1658</option>
			<option value="1657">1657</option>
			<option value="1656">1656</option>
			<option value="1655">1655</option>
			<option value="1654">1654</option>
			<option value="1653">1653</option>
			<option value="1652">1652</option>
			<option value="1651">1651</option>
			<option value="1650">1650</option>
			<option value="1649">1649</option>
			<option value="1648">1648</option>
			<option value="1647">1647</option>
			<option value="1646">1646</option>
			<option value="1645">1645</option>
			<option value="1644">1644</option>
			<option value="1643">1643</option>
			<option value="1642">1642</option>
			<option value="1641">1641</option>
			<option value="1640">1640</option>
			<option value="1639">1639</option>
			<option value="1638">1638</option>
			<option value="1637">1637</option>
			<option value="1636">1636</option>
			<option value="1635">1635</option>
			<option value="1634">1634</option>
			<option value="1633">1633</option>
			<option value="1632">1632</option>
			<option value="1631">1631</option>
			<option value="1630">1630</option>
			<option value="1629">1629</option>
			<option value="1628">1628</option>
			<option value="1627">1627</option>
			<option value="1626">1626</option>
			<option value="1625">1625</option>
			<option value="1624">1624</option>
			<option value="1623">1623</option>
			<option value="1622">1622</option>
			<option value="1621">1621</option>
			<option value="1620">1620</option>
			<option value="1619">1619</option>
			<option value="1618">1618</option>
			<option value="1617">1617</option>
			<option value="1616">1616</option>
			<option value="1615">1615</option>
			<option value="1614">1614</option>
			<option value="1613">1613</option>
			<option value="1612">1612</option>
			<option value="1611">1611</option>
			<option value="1610">1610</option>
			<option value="1609">1609</option>
			<option value="1608">1608</option>
			<option value="1607">1607</option>
			<option value="1606">1606</option>
			<option value="1605">1605</option>
			<option value="1604">1604</option>
			<option value="1603">1603</option>
			<option value="1602">1602</option>
			<option value="1601">1601</option>
			<option value="1600">1600</option>
			<option value="1599">1599</option>
			<option value="1598">1598</option>
			<option value="1597">1597</option>
			<option value="1596">1596</option>
			<option value="1595">1595</option>
			<option value="1594">1594</option>
			<option value="1593">1593</option>
			<option value="1592">1592</option>
			<option value="1591">1591</option>
			<option value="1590">1590</option>
			<option value="1589">1589</option>
			<option value="1588">1588</option>
			<option value="1587">1587</option>
			<option value="1586">1586</option>
			<option value="1585">1585</option>
			<option value="1584">1584</option>
			<option value="1583">1583</option>
			<option value="1582">1582</option>
			<option value="1581">1581</option>
			<option value="1580">1580</option>
			<option value="1579">1579</option>
			<option value="1578">1578</option>
			<option value="1577">1577</option>
			<option value="1576">1576</option>
			<option value="1575">1575</option>
			<option value="1574">1574</option>
			<option value="1573">1573</option>
			<option value="1572">1572</option>
			<option value="1571">1571</option>
			<option value="1570">1570</option>
			<option value="1569">1569</option>
			<option value="1568">1568</option>
			<option value="1567">1567</option>
			<option value="1566">1566</option>
			<option value="1565">1565</option>
			<option value="1564">1564</option>
			<option value="1563">1563</option>
			<option value="1562">1562</option>
			<option value="1561">1561</option>
			<option value="1560">1560</option>
			<option value="1559">1559</option>
			<option value="1558">1558</option>
			<option value="1557">1557</option>
			<option value="1556">1556</option>
			<option value="1555">1555</option>
			<option value="1554">1554</option>
			<option value="1553">1553</option>
			<option value="1552">1552</option>
			<option value="1551">1551</option>
			<option value="1550">1550</option>
		</select>
	</div>
</div>

Facet Group

Introduced : 0.1.0

Updated : 0.1.4

Usage : `{{> facet-group }}`

Add/remove open class to change height

Options :

facet-object - Object

<div class="facet-group open">
	<div class="facet-title">
		Périodes<span class="chevron pull-right text-danger"></span>
	</div>
	<ul>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="all" /> Toute</label>
				<span class="text-clear pull-right">587</span>
			</div>
		</li>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="before_1900" /> Avant 1900</label>
				<span class="text-clear pull-right">94</span>
			</div>
		</li>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="1900-1914" /> 1900 - 1914</label>
				<span class="text-clear pull-right">41</span>
			</div>
		</li>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="1914-1918" /> 1914 - 1918</label>
				<span class="text-clear pull-right">89</span>
			</div>
		</li>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="1918-1939" /> 1918 - 1939</label>
				<span class="text-clear pull-right">40</span>
			</div>
		</li>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="1939-1945" /> 1939 - 1945</label>
				<span class="text-clear pull-right">64</span>
			</div>
		</li>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="1945-1960" /> 1945 - 1960</label>
				<span class="text-clear pull-right">89</span>
			</div>
		</li>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="1960-1980" /> 1960 - 1980</label>
				<span class="text-clear pull-right">87</span>
			</div>
		</li>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="1980-2000" /> 1980 - 2000</label>
				<span class="text-clear pull-right">83</span>
			</div>
		</li>
		<li>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="2000-2016" /> 2000 - 2016</label>
				<span class="text-clear pull-right">42</span>
			</div>
		</li>
		<li>
			<button class="facet-add">
				<span>+</span> Ajouter
			</button>
			<form class="facet-form hidden">
				<input type="text" class="form-control input-sm">
			</form>
		</li>
	</ul>
</div>

Forum Conversation

Introduced : 0.6.7

Updated :

Usage : `{{> conversation }}`

Options :

activityobject Object username avatar message-intro date

– -

<tr>
	<td>
		<a href="./forum-conversation.html"><h4></h4></a>
		<b></b> – <small></small> - <small></small>
	</td>
	<td class="text-right">
		<small></small>
	</td>
</tr>

Forum Message Bubble

Usage : `{{> message-bubble }}`

Options :

conversationobject - Object
left - true
message - string
avatar - url
date - string

Écrit par , le

<div class="media message-bubble">
	<div class="media-body">

		<br/>
		<small class="text-muted">Écrit par <a href="./profile-person.html"></a>, le </small>
	</div>
	<div class="media-right">
		<img class="media-object" src="" alt="...">
	</div>
</div>

Group Teaser

Introduced : 0.3.0

Updated : -

Usage : `{{> group-teaser }}`

Options :

group-object - Object

Vie quotidienne › Loisirs • Crée par Sylvie Bazzanella

<div class="group-teaser" data-w="" data-h="">
	<a href="detail.html">
		<div class="thumbnail" style="background-image: url('');">
			<img src="" alt="" class="img-responsive" />
		</div>
	</a>
	<div class="group-caption">
		<a href="detail.html"></a>
		<div class="group-counter">
			&nbsp;<small><i class="icons icons-file"></i></small>
		</div>
	</div>
	<div class="group-metadata">
		<a href="#">Vie quotidienne</a> <span class="text-clear">&rsaquo;</span> <a href="#">Loisirs</a> <span class="text-clear">&bull; Crée par</span> <a href="#">Sylvie Bazzanella</a>
	</div>
</div>

Login Form

Introduced : 0.0.4

Updated : -

Usage : `{{> login-form }}`

Connexion

J'ai oublié mon mot de passe

<h3 class="text-center">Connexion</h3>
<div class="spacer spacer-xs"></div>
<form>
	<div class="form-group">
		<label for="email">Adresse email</label>
		<input type="email" class="form-control" id="email" placeholder="Adresse email" value="" />
		<p class="help-block">C&#x27;est le moment où vous rentrez votre adresse email</p>
	</div>
	<div class="form-group">
		<label for="password">Votre mot de passe</label>
		<input type="password" class="form-control" id="password" placeholder="Votre mot de passe" value="" />
		<p class="help-block">N&#x27;aillez crainte, je détourne le regard.</p>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox" /> Resté connecté
		</label>
	</div>
	<div class="spacer spacer-xs"></div>
	<button type="submit" class="btn btn-primary btn-block">Je me connecte</button>
</form>
<div class="spacer spacer-sm"></div>
<div class="text-center">
	<a href="#">J'ai oublié mon mot de passe</a>
</div>

Media Features Bar

Introduced : 0.3.1

Updated : -

Usage : `{{> media-features-bar }}`

Suivre Commenter (4)

Ajouter

<div class="media-features-bar bg-concrete">
	<div class="row">
		<div class="col-sm-4">
			<a href="#" class="btn btn-link active" data-alert-message="<i class='icons icons-ok'></i> Bravo, vous suivez le média : Le bonheur parmi les narcisses!"><i class="icons icons-heart"></i> Suivre</a>
			<a href="#" class="btn btn-link">
				<i class="icons icons-comment"></i> Commenter (4)
			</a>
		</div>
		<div class="col-sm-4 text-center">
			<a href="detail-fullscreen.html" class="btn btn-link">
				<i class="icons icons-fullscreen"></i>
			</a>
		</div>
		<div class="col-sm-4 text-right">
			<button class="btn btn-link">
				<i class="icons icons-share-alt"></i> Partager
			</button>
			<a href="add-to-collection.html" class="btn btn-link"><i class="icons icons-plus"></i> Ajouter</a>
			<button class="btn btn-link">
				<i class="icons icons-alert"></i>
			</button>
		</div>
	</div>
</div>

Media Infobar

Introduced : 0.1.1

Updated : 0.3.0

Usage : `{{> media-infobar }}`

Date

mai 1972

Lieu

Route des Narcisses, 1833 Les Avants s/Montreux, Zwitserland
Voir sur la carte

Popularité

220 vues
40 suivent

<div class="media-infobar">
	<h5>Date</h5>
	<p>mai 1972</p>

	<h5>Lieu</h5>
	<p>
		Route des Narcisses, 1833 Les Avants s/Montreux, Zwitserland
		<br>
		<a href="http://maps.google.com/">Voir sur la carte</a>
	</p>

	<h5>Popularité</h5>
	<p>
		<i class="icons icons-eye-open"></i> 220 vues
		<br>
		<i class="icons icons-heart text-danger"></i> 40 suivent
	</p>

	<h5>Auteur</h5>
	<p>
		<a href="#">Suzanne Ogay</a>
		<br>
	</p>

	<div class="spacer spacer-xs"></div>

	<div class="row">
		<div class="col-xs-3">
			<a href="#">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2013/02/babbd149042ee7f7_JPG_168x168_crop_q85.jpg" class="img-circle img-responsive" alt="Nicolas Ogay" />
			</a>
		</div>
		<div class="col-xs-9">
			<h5>Partagé par</h5>
			<a href="#">Nicolas Ogay</a>
		</div>
	</div>

	<div class="spacer spacer-sm"></div>

	<div class="license-block">
		license &rsaquo; <a href="#">Tous droits réservé</a>
	</div>

	<h5>Tags</h5>
	<div class="spacer spacer-xs"></div>
	<a href="#" class="label label-default">1972</a>
	<a href="#" class="label label-default">enfants</a>
	<a href="#" class="label label-default">les avants</a>
	<a href="#" class="label label-default">montreux</a>
	<a href="#" class="label label-default">narcisses</a>

	<h5>Thèmes</h5>
	<div class="spacer spacer-xs"></div>
	<a href="#" class="label label-default">Montreux</a>
	<a href="#" class="label label-default">Paysages romands</a>
	<a href="#" class="label label-default">La nature complice</a>
	<a href="#" class="label label-default">Fête des Narcisses de Montreux</a>
	<h5>Dossiers</h5>
	<div class="spacer spacer-xs"></div>
	<a href="#" class="label label-default"><strong>Thème 0</strong> &rsaquo; Les Avants</a>
	<a href="#" class="label label-default"><strong>Thème 1</strong> &rsaquo; Ma famille maternelle</a>
	<a href="#" class="label label-default"><strong>Thème 2</strong> &rsaquo; Le Narcisse “La Fleur” et tout autour</a>
	<a href="#" class="label label-default"><strong>Thème 3</strong> &rsaquo; Les fleurs</a>

</div>

Media Item

Introduced : 0.0.5

Updated : 0.6.0 (From `0.3.0`, the `thumbnail` component replace the simple `<img>` and the component is not a link any more)

Usage : `{{> media-item }}`

Options :

mediaobject - Object

| |

<div class="media-item" data-w="" data-h="">
	<a href="detail.html">
		<div class="thumbnail" style="background-image: url('');">
			<img src="" alt="" class="img-responsive" />
		</div>
	</a>
	<div class="media-caption">
		<h5>
      <a href="detail.html"></a>
    </h5>
		<p class="media-description">
			<br>
		</p>
		<div class="text-clear">
			&thinsp;<small><i class="icons icons-eye-open"></i></small> | &thinsp;<small><i class="icons icons-heart"></i></small> | &thinsp;<small><i class="icons icons-comment"></i></small>
		</div>
		<span class="media-icon icons icons-"></span>
	</div>
</div>

Media Mondrian Item

Introduced : 0.6.0

Usage : `{{> media-mondrian-item }}`

Options :

mediaobject - Object

<div class="media-mondrian-item">
	<div class="thumbnail">
		<img src="" alt="" width="" height="" />
	</div>
</div>

Message Bubble

Usage : `{{> message-bubble }}`

Options :

conversationobject - Object
left - true
message - string
avatar - url
date - string

<div class="media message-bubble message-bubble-right">
	<div class="media-body">

		<br/>
		<small class="text-muted"></small>
	</div>
	<div class="media-right">
		<img class="media-object" src="" alt="...">
	</div>
</div>

Progression

Introduced : 0.5.2

Updated : -

Usage : `{{> progression }}`

Profil comlété

Plus votre profil est comple, plus il sera intéressant pour les autres personnes présentes sur Notre Histoire.

<div class="progression">
	<div class="progress">
		<div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%;">
			<span class="sr-only">15% Complete</span>
		</div>
	</div>
	<h5>Profil comlété</h5>
	<p>
		Plus votre profil est comple, plus il sera intéressant pour les autres personnes présentes sur Notre Histoire.
	</p>
</div>

Results Heading

Introduced : 0.5.0

Updated : -

Usage : `{{> results-heading }}`

1114 résultats pour “train”

chat chalet montagne chien Vie quotidienne › Transport arc-en-ciel 1980-1990

<div class="results-heading text-sans">
	<h1 class="h2">1114 résultats pour “train”</h1>
	<p>
		<span class="label label-default">
      chat
      <button class="label-close">&times;</button>
    </span> <span class="label label-default">
      chalet
      <button class="label-close">&times;</button>
    </span> <span class="label label-default">
      montagne
      <button class="label-close">&times;</button>
    </span> <span class="label label-default">
      chien
      <button class="label-close">&times;</button>
    </span> <span class="label label-default">
      <strong>Vie quotidienne</strong> &rsaquo; Transport
      <button class="label-close">&times;</button>
    </span> <span class="label label-default">
      arc-en-ciel
      <button class="label-close">&times;</button>
    </span> <span class="label label-default">
      1980-1990
      <button class="label-close">&times;</button>
    </span> </p>
</div>

Results Navbar

Introduced : 0.5.0

Updated : 0.5.1

Usage : `{{> results-navbar }}`

<div class="results-navbar text-sans">
	<div class="row">
		<div class="col-sm-9 col-sm-push-3 text-right">
			<strong class="text-clear">
        Trier par
      </strong>
			<select class="form-control">
				<option>Popularité</option>
				<option>Date de publication (nouveautés)</option>
				<option>Date de publication (le plus ancien)</option>
				<option selected="selected">Pertinence</option>
				<option>Date d'origine (le plus récent)</option>
				<option>Date d'orginie (le plus ancien)</option>
				<option>Récemment mis à jour</option>
			</select>
			<span class="vertical-separator"></span>
			<button id="display-grid" class="btn btn-default active">
				<i class="icons icons-th"></i>
			</button>
			<button id="display-list" class="btn btn-default">
				<i class="icons icons-th-list"></i>
			</button>
			<button id="display-map" class="btn btn-default">
				<i class="icons icons-map-marker"></i>
			</button>
		</div>
		<div class="col-sm-3 col-sm-pull-9">
			<button id="toggle-sidebar" class="btn btn-clear btn-sm">Filtres <span class="chevron chevron-right chevron-thin"></span></button>
		</div>
	</div>
</div>

Search Field

Introduced : 0.5.1

Updated : -

Usage : `{{> search-field }}`

Options :

contextualized - Boolean (default false)

<form id="search-form" class="navbar-form navbar-left" role="search">

	<input type="text" class="form-control" placeholder="Rechercher" />
	<span class="icons icons-search" aria-hidden="true"></span>
</form>

Search Field Contextualized

Introduced : 0.5.1

Updated : -

Usage : `{{> search-field-contextualized }}`

<form id="search-form" class="navbar-form navbar-left navbar-form-contextualized" role="search">
	<span class="label label-default">
  Le Temps
  <button class="label-close">&times;</button>
</span>
	<input type="text" class="form-control" placeholder="Rechercher" />
	<span class="icons icons-search" aria-hidden="true"></span>
</form>

Signup Form

Introduced : 0.0.6

Updated : -

Usage : `{{> signup-form }}`

Inscription

Nom et Prénom

À qui avons-nous l'honneur ?

Adresse email

C'est le moment où vous rentrez votre adresse email.

Mot de passe

N'aillez crainte, je détourne le regard.

Confirmation du mot de passe

Juste pour être sûr que vous vous en souvenez.

Votre canton

T'as où les vaches ?

Des commentaires à chaud ?

Je m'inscris

<h3 class="text-center">Inscription</h3>
<div class="spacer spacer-xs"></div>
<form>
	<div class="form-group">
		<label for="nom">Nom et Prénom</label>
		<input type="text" class="form-control" id="nom" placeholder="Nom et Prénom" value="" />
		<p class="help-block">À qui avons-nous l&#x27;honneur ?</p>
	</div>
	<div class="form-group">
		<label for="email">Adresse email</label>
		<input type="email" class="form-control" id="email" placeholder="Adresse email" value="" />
		<p class="help-block">C&#x27;est le moment où vous rentrez votre adresse email.</p>
	</div>
	<div class="form-group">
		<label for="password">Mot de passe</label>
		<input type="password" class="form-control" id="password" placeholder="Mot de passe" value="" />
		<p class="help-block">N&#x27;aillez crainte, je détourne le regard.</p>
	</div>
	<div class="form-group">
		<label for="password">Confirmation du mot de passe</label>
		<input type="password" class="form-control" id="password" placeholder="Confirmation du mot de passe" value="" />
		<p class="help-block">Juste pour être sûr que vous vous en souvenez.</p>
	</div>
	<div class="form-group">
		<label for="canton">Votre canton</label>
		<select class="form-control">
			<option disabled selected>Votre canton</option>
			<optgroup>
				<option vale="ag">Argovie</option>
				<option vale="ai">Appenzell Rhodes intérieures</option>
				<option vale="ar">Appenzell Rhodes extérieures</option>
				<option vale="be">Berne</option>
				<option vale="bl">Bâle Campagne</option>
				<option vale="bs">Bâle Ville</option>
				<option vale="fr">Fribourg</option>
				<option vale="ge">Genève</option>
				<option vale="gl">Glaris</option>
				<option vale="gr">Grisons</option>
				<option vale="ju">Jura</option>
				<option vale="lu">Lucerne -Luzern</option>
				<option vale="ne">Neuchâtel</option>
				<option vale="nw">Nidwald</option>
				<option vale="ow">Obwald</option>
				<option vale="sg">Saint-Gall</option>
				<option vale="sh">Schaffhouse</option>
				<option vale="so">Soleure</option>
				<option vale="sz">Schwyz</option>
				<option vale="tg">Thurgovie</option>
				<option vale="ti">Ticino</option>
				<option vale="ur">Uri</option>
				<option vale="vd">Vaud</option>
				<option vale="vs">Valais</option>
				<option vale="zg">Zug</option>
				<option vale="zh">Zurich</option>
			</optgroup>
		</select>
		<p class="help-block">T&#x27;as où les vaches ?</p>
	</div>
	<div class="form-group">
		<label for="message">Des commentaires à chaud ?</label>
		<textarea class="form-control" id="message" rows="8">Ne soyez pas timide, nous sommes tout ouïe.</textarea>
	</div>
	<div class="spacer spacer-xs"></div>
	<a href="profile-edit.html" class="btn btn-primary btn-block" role="button">Je m'inscris</a>
</form>

Uploader

Introduced : 0.1.6

Updated : -

Usage : `{{> uploader }}`

<form class="uploader" action="add-media-to-collection.html" method="get" enctype="multipart/form-data">
	<input type="file" name="files[]" id="filer_input" multiple="multiple" />
	<input type="submit" class="btn btn-primary pull-right" value="Suivant" />
</form>

Molecules

Activity Items

Introduced : 0.6.7

Updated :

Usage : {{> activity-items }}

Options :

Alert

Introduced : 0.4.1

Updated : 0.5.3

Usage : {{> alert }}

Options :

Alert Danger

Introduced : 0.4.1

Updated : -

Usage : {{> alert-danger }}

Alert Info

Introduced : 0.5.1

Updated : -

Usage : {{> alert-info }}

Alert Success

Introduced : 0.4.1

Updated : -

Usage : {{> alert-success }}

Alert Warning

Introduced : 0.4.1

Updated : -

Usage : {{> alert-warning }}

Axis

Introduced : 0.6.0

Usage : {{> axis }}

Comment

Introduced : 0.1.1

Updated : 0.3.1

Usage : {{> comment }}

Options :

Martine Desarzens le 5 mars 2013

Conversation

Introduced : 0.6.7

Updated :

Usage : {{> conversation }}

Options :

...

Date Field

Introduced : 0.1.7

Updated : -

Usage : {{> date-field }}

Options :

Facet Group

Introduced : 0.1.0

Updated : 0.1.4

Usage : {{> facet-group }}

Options :

Forum Conversation

Introduced : 0.6.7

Updated :

Usage : {{> conversation }}

Options :

Forum Message Bubble

Usage : {{> message-bubble }}

Options :

Group Teaser

Introduced : 0.3.0

Updated : -

Usage : {{> group-teaser }}

Options :

Login Form

Introduced : 0.0.4

Updated : -

Usage : {{> login-form }}

Connexion

Media Features Bar

Introduced : 0.3.1

Updated : -

Usage : {{> media-features-bar }}

Media Infobar

Introduced : 0.1.1

Updated : 0.3.0

Usage : {{> media-infobar }}

Date

Lieu

Usage : `{{> activity-items }}`

Usage : `{{> alert }}`

Usage : `{{> alert-danger }}`

Usage : `{{> alert-info }}`

Usage : `{{> alert-success }}`

Usage : `{{> alert-warning }}`

Usage : `{{> axis }}`

Usage : `{{> comment }}`

Usage : `{{> conversation }}`

Usage : `{{> date-field }}`

Usage : `{{> facet-group }}`

Usage : `{{> conversation }}`

Usage : `{{> message-bubble }}`

Usage : `{{> group-teaser }}`

Usage : `{{> login-form }}`

Usage : `{{> media-features-bar }}`

Usage : `{{> media-infobar }}`

Updated : 0.6.0 (From `0.3.0`, the `thumbnail` component replace the simple `<img>` and the component is not a link any more)

Usage : `{{> media-item }}`

Usage : `{{> media-mondrian-item }}`

Usage : `{{> message-bubble }}`

Usage : `{{> progression }}`

Usage : `{{> results-heading }}`

Usage : `{{> results-navbar }}`

Usage : `{{> search-field }}`

Usage : `{{> search-field-contextualized }}`

Usage : `{{> signup-form }}`

Usage : `{{> uploader }}`