Nedan finns exempelkod att använda i Litiums editor-fält, för att t.ex. skapa en snygg responsiv tabell, eller dela upp ett textstycke i kolumner.

För att se kod/css-klasser för exemplen nedan gå till "källa"-läget i editorn för denna sida.

 

Tabeller (tex insynslista)

Responsiv tabell, stil 1 (css-klass: "table_1")

Exempelkod:

<table class="table_1">
<thead>
<tr>
<th>Rubrik1</th>
<th>Rubrik 2</th>
<th>Rubrik 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text 1</td>
<td>Text 1</td>
<td>Text 1</td>
</tr>
<tr>
<td>Text 2</td>
<td>Text 2</td>
<td>Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 3</td>
<td>Text 3</td>
</tr>
</tbody>
</table>
 
Rubrik1 Rubrik 2 Rubrik 3
Text 1 Text 1 Text 1
Text 2 Text 2 Text 2
Text 3 Text 3 Text 3

 

 

Responsiv tabell, stil 2 (css-klass: "table_2")

Exempelkod:

<table class="table_2">
<thead>
<tr>
<th>Rubrik1</th>
<th>Rubrik 2</th>
<th>Rubrik 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text 1</td>
<td>Text 1</td>
<td>Text 1</td>
</tr>
<tr>
<td>Text 2</td>
<td>Text 2</td>
<td>Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 3</td>
<td>Text 3</td>
</tr>
</tbody>
</table>
 
Rubrik1 Rubrik 2 Rubrik 3
Text 1 Text 1 Text 1
Text 2 Text 2 Text 2
Text 3 Text 3 Text 3

 

 

Responsiva bilder

Bild som anpassar sin storlek efter skärm (css-klass: "img;) 

Exempelkod:
<div class="pic"><img alt="" src="http://placehold.it/800x150" /></div>

 

 

Knappar (tex anmälan)

Knapp, liten (css-klass: "general_button green") 

Exempelkod:
<a class="general_button green" href="#" target="_self">Button</a>

Button


Knapp, medium (css-klass: "general_button green medium")

Exempelkod:
<a class="general_button green medium" href="#" target="_self">Button</a>

Button


Knapp, stor (css-klass: "general_button green big")

Exempelkod:
<a class="general_button green big" href="#" target="_self">Button</a>

Button

 

 

Checklista (tex specifikation produkt)

Css-klass "list_1"

Exempelkod:

<div>
<ul class="list_1">
<li><a href="#">L&auml;nk 1</a></li>
<li><a href="#">L&auml;nk 2</a></li>
<li>Text 1</li>
<li>Text 2</li>
</ul>
</div>
 
 

Punktlista (tex agenda kalenderaktivitet)

Css-klass "list_3"

Exempelkod:

<div>
<ul class="list_3">
<li><a href="#">L&auml;nk 1</a></li>
<li><a href="#">L&auml;nk 2</a></li>
<li>Text 1</li>
<li>Text 2</li>
</ul>
</div>
 
 

Citat (tex produktinformationstext)

Css-klass "quote1"

Exempelkod:

<div>
<blockquote class="quote1">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.</blockquote>
</div>
 
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.

 

Css-klass "quote2"

Exempelkod:

<div>
<blockquote class="quote2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.</blockquote>
</div>
 
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.

 

 

Kolumner (tex uppdelning av text/bilder på innehållssida)

 

2 kolumner (css-klass: "one_half", "one_half last")

Exempelkod:

<div class="one_half">
<p>1/2 Kolumner</p>
<p>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="one_half last">
<p>1/2 Kolumner</p>
<p>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
 

1/2 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

1/2 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.


 

3 kolumner (css-klass: "one_third", "one_third", "one_third last")

1/3 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

1/3 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

1/3 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.


 

2+1 kolumner (css-klass: "two_third", ""one_third last") 

2/3 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor 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

1/3 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor dolor sit amet, consectetur adipisicing

4 kolumner (css-klass: "one_fourth", "one_fourth", "one_fourth", "one_fourth last") 

1/4 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam.

1/4 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam.

1/4 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam.

1/4 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam.


 

3+1 kolumner (css-klass: "three_fourth", "one_fourth last") 

3/4 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ut labore et dolor 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

1/4 Kolumner

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

 
 

Personkort (tex Styrelsepresentation)

Exempelkod:

<div class="person">
<article>
<div class="image"><a href="#"><img alt="" src="http://placehold.it/160x180" /><span class="hover zoom">&nbsp;</span></a></div>
<div class="content">
<h3><a href="#">F&ouml;rnamn Efternamn</a></h3>
<div class="categories"><a href="#">Personegenskaper...</a></div>
</div>
<div class="clearboth">&nbsp;</div>
</article>
<article>
<div class="image"><a href="#"><img alt="" src="http://placehold.it/160x180" /><span class="hover zoom">&nbsp;</span></a></div>
<div class="content">
<h3><a href="#">F&ouml;rnamn Efternamn</a></h3>
<div class="categories"><a href="#">Personegenskaper...</a></div>
</div>
<div class="clearboth">&nbsp;</div>
</article>
</div>