Relumen kirjaston tyyliopas

Versio 1.1
Typografia
HTML-otsikot

Otsikko 1

Otsikko 2

Otsikko 3

Otsikko 4

Otsikko 5
Otsikko 6
Otsikko Luokat

otsikko-xxsuuri

otsikko-xlarge

otsikko-suuri

otsikko-medium

otsikko-pieni

otsikko-xsmall

Muut HTML-tunnisteet

Kaikki kappaleet (HTML Tag)A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Kaikki linkit
Lohkolainaus
  • Ei luettelomerkkiä

  • Ei luettelomerkkiä

  • Ei luettelomerkkiä

  • Ei luettelomerkkiä

  1. Ei luettelomerkkiä

  2. Ei luettelomerkkiä

  3. Ei luettelomerkkiä

Tekstin koot

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tekstin painot
text-weight-xbold
teksti-paino-lihavoitu
teksti-paino-puolilihavoitu
teksti-paino-medium
teksti-paino-normaali
teksti-paino-kevyt
Tekstin tyylit
tekstityylinen kursivoitu
tekstityylinen yliviivaus
text-style-allcaps
text-style-nowrap
tekstityylinen lainaus
tekstityyli-2 riviä
tekstityyli-3 riviä
tekstityylinen mykistetty
Tekstin värit
teksti-väri-musta
teksti-väri-valkoinen
Tekstin tasaus
text-align-left
text-align-center
text-align-right
Rich Text

Otsikko 1

Otsikko 2

Otsikko 3

Otsikko 4

Otsikko 5
Otsikko 6
Tämä on lohkolainaus

Rich text -elementin avulla voit luoda ja muotoilla otsikoita, kappaleita, lainausmerkkejä, kuvia ja videoita yhdessä paikassa sen sijaan, että sinun tarvitsee lisätä ja muotoilla niitä yksitellen. Kaksoisnapsauta ja luo sisältöä helposti.

Tämä on linkki RTF-tekstin sisällä

  • Luettelokohde
  • Luettelokohde
  • Luettelokohde
  1. Luettelokohde
  2. Luettelokohde
  3. Luettelokohde
Kuvateksti menee tähän
värit
Värimalli
.musta
.valkoinen
.vaalean harmaa
Taustaväri

.tausta-väri-musta

.tausta-väri-valkoinen

.tausta-väri-vaaleanharmaa

Käyttöliittymän elementit
Lomakkeen elementit
Kiitos! Lähetyksesi on vastaanotettu!
Kuvakkeet

.icon-xxsmall

.icon-xsmall

.kuvake-pieni

.icon-medium

.kuvake-suuri

.icon-xlarge

.icon-1x1-xxsmall

.icon-1x1-xsmall

.kuvake-1x1-small

.icon-1x1-medium

.kuvake-1x1-suuri

.kuvake-1x1-xlarge

Kuvat

Kuvan kuvasuhde 1:1

Kuvan kuvasuhde 4:3

Kuvan kuvasuhde 3:2

Kuvan kuvasuhde 16:9

Välit
Marginaalin suunta
.margin-top
.margin-bottom
.margin-vasen
.margin-right
.margin-horizontal
.margin-vertical
Marginaalin koko
.marginaali-0
.marginaali-pieni
.margin-xxsmall
.margin-xsmall
.marginaali-pieni
.margin-medium
.marginaali-suuri
.margin-xlarge
.margin-xxlarge
.marginaali valtava
.margin-xhuge
.margin-xxhuge
.margin-custom1
.margin-custom2
.margin-custom3
Pehmusteen suunta
.padding-top
.padding-bottom
.padding-left
.padding-right
.padding-horizontal
.padding-vertical
Pehmusteen koko
.padding-0
.padding-tiny
.padding-xxsmall
.padding-xsmall
.padding-small
.padding-medium
.padding-large
.padding-xlarge
.padding-xxlarge
.padding-valtava
.padding-xhuge
.padding-xxhuge
.padding-custom1
.padding-custom2
.padding-custom3
Layout
Säiliö
.container-large
.container-medium
.kontti-pieni
Max leveydet
.max-width-full
.max-width-full-tablet
.max-width-full-mobile-landscape
max-width-full-mobile-portrait
.max-width-xxsmall
.max-width-xsmall
.max-width-small
.max-width-medium
.max-leveys-suuri
.max-leveys-xlarge
.max-width-xxlarge
Muut luokat
Reagointikykyä
.piilottaa- Piilota kaikilla laitteilla
.piilota-tabletti- Piilota tabletin resoluutiosta alkaen
.hide-mobile-landscape- Piilota alkaen mobiilimaisemaresoluutiosta
.hide-mobile-portrait- Piilota alkaen mobiilimuotokuvan resoluutiosta
.näytä- näyttö kaikissa laitteissa
.show-tabletti- näyttö tabletin resoluutiosta alkaen
.show-mobile-landscape- näyttö alkaen matkapuhelimen vaakaresoluutiosta
.show-mobile-portrait- näyttö matkapuhelimen muotokuvaresoluutiosta alkaen
Apuohjelma
.z-indeksi-1- tuo elementtiä lähemmäksi z-indeksiä, asettaa z-indeksin arvoon 1
.z-indeksi-2- tuo elementtiä lähemmäksi z-indeksiä, asettaa z-indeksin arvoon 2
.align-center- asettaa marginaalin vasemmalle ja oikealle automaattiseksi, keskittää elementin sen päädiv
.space-clean- asettaa kaikki välit 0:ksi, mukaan lukien marginaalit ja täyte
.div-neliö- luo ja ylläpitää div:n 1:1-ulottuvuutta. CSS taikuutta
.kerros- asettaa absoluuttisen sijainnin 0 %:lla kaikilla puolilla - lisää tämä luokka div-elementtiin, jotta se laajentaa yläelementin koko kokoa, ja varmista, että emoelementissä on "position: suhteellinen".
.clickable-off- asettaa osoitintapahtumat none-tilaan, estää kaiken napsautuksen ja hiiren vuorovaikutuksen elementin kanssa
.clickable-on - sets pointer-events to auto, enables all click and hover interaction with an element
.overflow-hidden - sets overflow to hidden
.overflow-scroll - sets overflow to scroll
.overflow-auto - sets overflow to auto
FREE SHIPPING ON ORDERS OVER $50
FREE SHIPPING ON ORDERS OVER $50
FREE SHIPPING ON ORDERS OVER $50
FREE SHIPPING ON ORDERS OVER $50
FREE SHIPPING ON ORDERS OVER 150€
FREE SHIPPING ON ORDERS OVER 150€
FREE SHIPPING ON ORDERS OVER 150€
FREE SHIPPING ON ORDERS OVER 150€

Get 10% OFF your next order

Subscribe to our newsletter to get a 10% OFF discount code

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.
Kiitos! Lähetyksesi on vastaanotettu!