Genom att kopiera HTML-kod till designelement kan du få in dem på dina egna sidor. Kopiera koden och klistra in den i HTML-läge på en sida.

Du kan enkelt ändra färg. Denna guide visar hur du väljer en egen färg på designelement.

Färgad rubrik

Kom ihåg

`<h2 style="background: #698cae; text-align: left; padding-left: 5px;"><span style="color: #000;"><strong>Kom ihåg</strong></span></h2>`

Färgblock

Rubrik

Text

<div style="background-color: #94c3bd; font-size: 12pt; color: #000000; padding: 30px; overflow: auto; border-radius: 20px;"> <h2>Rubrik</h2> <p>Text</p></div>

Blockquote

Skriv din text här

<blockquote>Skriv din text här</blockquote>

Avgränsare i färg

<hr style="margin: 0 auto; border: 1px solid #94c3bd; width: 90%;" />

OBS-ruta 1

❕Text

<div style="background-color: #fe4800; width: 90%; margin: 0 auto; padding: 10px; overflow: auto; border-radius: 6px; color: #ffffff; font-size: 18pt;"><span style="font-size: 30px;">❕</span><span>Text</span></div>

Obs-ruta 2

❗OBS Lorem ipsum

<div style="padding: 15px; margin: 0 auto; border: 3px dotted red; border-radius: 10px; background-color: #ffffff; overflow: auto; width: 90%; min-width: 200px;"><span style="font-size: 18pt;">❗</span><span style="color: #e03e2d;"><strong style="color: #b02f21;"><span style="font-size: 18pt;">OBS</span>  </strong><span style="font-size: 14pt; color: #000000;">Lorem ipsum</span></span></div>

Box

Rubrik

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="border-round" style="background-color: white; padding: 15px; border: 7px solid #02678a;"> <h2>Rubrik</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div&gt

Kolumn

Rubrik i kolumn 1

Två rutor som hänger ihop! Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Rubrik i kolumn 2

Text i kolumn 2. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

<div class="content-box"><div class="grid-row"><div class="col-sm-12 col-md6"><div class="styleguide-section__grid-demo-element border border-trbl border-round" style="padding: 15px; height: 100%;"><p><span style="font-size: 18pt;">Rubrik i kolumn 1 <br /></span></p><hr /><p style="text-align: left;">Tvårutor som hänger ihop! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div><div class="col-sm-12 col-md-6"><div class="styleguide-section__grid-demo-element border border-trbl border-round" style="padding: 15px; height: 100%;"<p><span style="font-size: 18pt;">Rubrik i kolumn 2<br /></span></p><hr /><p>Text i kolumn 2. Lorem ipsum dolor sit amet, consectetur adipiscingelit, 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 eacommodo consequat.</p></div></div></div></div>

Alternativ textruta

📥 Inlämning

Text

<div style="background-color: #94c3bd; overflow: auto; border: 1px solid #94c3bd; border-radius: 6px; padding: 0;">
<div style="padding: 0 20px;">
<h2>📥 Inlämning</h2>
</div>
<div style="background-color: #ffffff; padding: 10px 20px;">
<p>Text</p>
</div>

Navigering

<div id="startsida-gu">
<ul style="border-radius: 20px; list-style-type: none; margin: 0px 0px 20px 0px; padding: 10px; overflow: hidden; background-color: #f5e0c8; border: 1px solid #bbb; max-width: 100%; text-align: center;">
<li style="display: inline-block; color: #000000; padding: 0px 10px 0px 10px; border-style: solid; border-color: #ffffff; border-width: 0px 2px 0px 2px; font-size: 1em;"><a title="Ny student" href="https://studentportalen.gu.se" target="_blank" rel="noopener">Ny student</a></li>
<li style="display: inline-block; color: #000000; padding: 0px 10px 0px 10px; border-style: solid; border-color: #ffffff; border-width: 0px 2px 0px 0px; font-size: 1em;"><a title="Mina studier" href="https://studentportalen.gu.se/minastudier" target="_blank" rel="noopener">Mina studier</a></li>
<li style="display: inline-block; color: #000000; padding: 0px 10px 0px 10px; border-style: solid; border-color: #ffffff; border-width: 0px 2px 0px 0px; font-size: 1em;"><a title="Tjänster och verktyg" href="https://studentportalen.gu.se/e-tjanster" target="_blank">Tjänster och verktyg</a></li>
<li style="display: inline-block; color: #000000; padding: 0px 10px 0px 10px; border-style: solid; border-color: #ffffff; border-width: 0px 2px 0px 0px; font-size: 1em;"><a title="Handledning och stöd" href="https://studentportalen.gu.se/handledning-och-stod" target="_blank">Handledning och stöd</a></li>
</ul>
</div>