Rich text

Text elements.
There are a lot of pre-styled text ready for Magasin. Put class="rich-text" on the parent element and it's content will get styled.


Rich text

Component status: WIP

Text elements.
There are a lot of pre-styled text ready for Magasin. Put class="rich-text" on the parent element and it's content will get styled.

H1 headline

H2 headline

H3 headline

H4 headline

H5 headline

(body-large) Grumpy wizards, 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.

(body -- default text styling) Grumpy wizards, 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.

(body-small) Grumpy wizards, 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.

Lorem impsum, this is sub: sub text

Lorem impsum, this is sup: super text

Lorem impsum, this is small: small text

Lorem impsum, this is strong: strong text

(Person-Quote) Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

- Consectetur amet

(Block-Quote) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...

  • List item
  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
  4. List item
Årstal Titel
2013-2014 Lorem ipsum dolor sit amet
2014-2015 Lorem ipsum dolor sit amet
2015-2016 Lorem ipsum dolor sit amet
<div class="rich-text">
	<h1>H1 headline</h1>
	<h2>H2 headline</h2>
	<h3>H3 headline</h3>
	<h4>H4 headline</h4>
	<h5>H5 headline</h5>

	
	
	<p class="bodytext-lg">(body-large) Grumpy wizards, 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.
	</p>
	<p class="bodytext-md">(body -- default text styling) <a href="#">Grumpy wizards, consectetur adipisicing elit</a>, 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.
	</p>
	<p class="bodytext-sm">(body-small) Grumpy wizards, 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. <a href="#">Excepteur sint occaecat</a> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	<p>Lorem impsum, this is sub: <sub>sub text</sub>
	</p>
	<p>Lorem impsum, this is sup: <sup>super text</sup>
	</p>
	<p>Lorem impsum, this is small: <small>small text</small>
	</p>
	<p>Lorem impsum, this is strong: <strong>strong text</strong>
	</p>

	<blockquote>
		<p><strong>(Person-Quote) Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</strong>
		</p>
		<span>- Consectetur amet</span>
	</blockquote>

	<blockquote>
		<p>(Block-Quote) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</p>
	</blockquote>

	<ul>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
	</ul>
	<ol>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
	</ol>


	<table>
		<thead>
			<tr>
				<th><span>Årstal</span></th>
				<th><span>Titel</span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><span>2013-2014</span></td>
				<td><span>Lorem ipsum dolor sit amet</span></td>
			</tr>
			<tr>
				<td><span>2014-2015</span></td>
				<td><span>Lorem ipsum dolor sit amet</span></td>
			</tr>
			<tr>
				<td><span>2015-2016</span></td>
				<td><span>Lorem ipsum dolor sit amet</span></td>
			</tr>
		</tbody>
	</table>

</div>
Se mere