Tüpograafia
Värvid
Efektid
UI elemendid
Struktuuriklassid

Relume stiilijuhend

Client-First V2.1 • Viimati värskendatud 9. jaanuaril 2024
Client-First Docs
Tüpograafia
HTML-i pealkirjade sildid
HTML-sildid määravad vaikepealkirja stiilid.
Kõik H1 pealkirjad

Pealkiri 1

Kõik H2 pealkirjad

Pealkiri 2

Kõik H3 pealkirjad

3. pealkiri

Kõik H4 pealkirjad

4. pealkiri

Kõik H5 pealkirjad
Pealkiri 5
Kõik H6 pealkirjad
6. pealkiri
Rubriigid klassid
Klasside pealkiri, kui tüpograafia stiil ei ühti HTML-i vaikemärgendiga.
pealkirja stiil-h1

Pealkirja stiil-h1

pealkirja stiil-h2

Pealkirja stiil-h2

pealkirja stiil-h3

Pealkirja stiil-h3

pealkirja stiil-h4

Pealkirja stiil-h4

pealkirja stiil-h5

Pealkirja stiil-h5

pealkirja stiil-h6

Pealkirja stiil-h6

Muud HTML-i sildid
HTML-sildid määravad teksti vaikestiilid.
Kõik lõigud

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. 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.

Kõik lingid
Kõik lingid
Kõik plokktsitaadid
Blokeeri tsitaat
Kõik järjestamata loendid

  • Täppide loendit pole

  • Täppide loendit pole

Kõik järjestamata loendid

  • Täppide loendit pole

  • Täppide loendit pole

Kõik järjestatud loendid

  1. Täppide loendit pole

  2. Täppide loendit pole

  3. Täppide loendit pole

Teksti suurused
Tekst määrab klasside suurused, kui tüpograafia suurus ei ühti HTML-i vaikemärgendiga.
tekstisuurus-suur

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. 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.

tekstisuurus-keskmine

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. 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.

teksti suurus-regulaarne

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. 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.

teksti suurus-väike

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. 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.

teksti suurus-pisike

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. 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.

Teksti kaalud
Teksti kaaluklassid, kui tüpograafia kaal ei ühti HTML-i vaikemärgendiga.
text-weight-xbold
text-weight-xbold (800)
tekst-kaal-paks
text-weight-bold (700)
tekst-kaal-poolpaks
text-weight-semibold (600)
tekst-kaal-keskmine
text-weight-medium (500)
tekst-kaal-normaalne
text-weight-normal (400)
tekst-kaal-light
text-weight-light (300)
Teksti stiilid
Tekstistiili klassid, kui tüpograafia stiil ei ühti HTML-i vaikemärgendiga.
tekstistiilis-kaldkiri
tekstistiilis-kaldkiri
tekstistiilis-kriipsutatud
tekstistiilis-kriipsutatud
tekstistiilis suurtähed
tekstistiilis suurtähed
text-style-nowrap
text-style-nowrap
tekstistiil-tsitaat
tekstistiil-tsitaat
tekstistiilis link
tekstistiilis link
tekstistiil-2 rida
Lorem ipsum dolor sit amet, consectetur adipiscing eliit. 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.
tekstistiil-3 rida
Lorem ipsum dolor sit amet, consectetur adipiscing eliit. 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 eliit. 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.
tekstistiilis vaigistatud
tekstistiilis vaigistatud
Teksti joondamine
Teksti joondusklassid, kui tüpograafia joondus ei ühti HTML-i vaikemärgendiga.
text-align-left
text-align-left
text-align-center
text-align-center
tekst joondus paremale
tekst joondus paremale
Rikastekst
tekstirikas-tekst

Pealkiri 1

Pealkiri 2

3. pealkiri

4. pealkiri

Pealkiri 5
6. pealkiri
See on plokktsitaat

Rikasteksti element võimaldab teil luua ja vormindada pealkirju, lõike, tsitaate, pilte ja videoid ühes kohas, selle asemel, et neid eraldi lisada ja vormindada. Lihtsalt topeltklõpsake ja looge lihtsalt sisu.

See on link rikkalikus tekstis

  • Loendi üksus
  • Loendi üksus
  • Loendi üksus
  1. Loendi üksus
  2. Loendi üksus
  3. Loendi üksus
Pealkiri läheb siia
Värvid
Siit saate teada, kuidas kasutada muutujaid värvide haldamiseks
Näidisprojekt
Vaadake läbivaatust
Taustavärv
Korduvate taustavärvide haldamine.
taustavärv-must
taustavärv-valge
taustavärv-esmane
taustavärv-sekundaarne
taustavärv-tertsiaarne
taustavärv-alternatiiv
Teksti värv
Korduvate tekstivärvide haldamine.
tekst-värv-valge
tekst-värv-valge
tekst-värv-must
tekst-värv-must
tekst-värv-esmane
tekst-värv-esmane
tekst-värv-teisejärguline
tekst-värv-teisejärguline
tekst-värv-alternate
tekst-värv-alternate
Efektid
Kasti varjud
‍Varjud võimaldavad lisada kujundusele sügavust ja realistlikkust, paigutades elemendid z-teljele.
vari-xxsmall
shadow-xsmall
vari-väike
vari-meedium
vari-suur
vari-xlarge
vari-xxlarge
UI elemendid
Nupud
nuppu
Nupp
nuppu
on väike
Nupp
nuppu
on teisejärguline
Nupp
nuppu
on teisejärguline
on väike
Nupp
nuppu
on kolmanda tasemega
nuppu
on kolmanda tasemega
on väike
Nupp
nuppu
on-link
Nupp
Tumedal taustal kasutamiseks kasutage lihtsalt lisandmoodulit on-alternatiivne
nuppu
on-alternatiivne
Nupp
nuppu
on-alternatiivne
on väike
Nupp
nuppu
on teisejärguline
on-alternatiivne
Nupp
nuppu
on teisejärguline
on väike
on-alternatiivne
Nupp
nuppu
on-link
on-alternatiivne
Nupp
Ikoonidega nupud
nuppu
is-ikoon
Nupp
nuppu
on väike
is-ikoon
Nupp
nuppu
on teisejärguline
is-ikoon
Nupp
nuppu
on teisejärguline
on väike
is-ikoon
Nupp
nuppu
on-link
is-ikoon
Nupp
nuppu
on-ainult ikoon
nuppu
on väike
on-ainult ikoon
nuppu
on teisejärguline
on-ainult ikoon
nuppu
on teisejärguline
on väike
on-ainult ikoon
nuppu
on kolmanda tasemega
on-ainult ikoon
nuppu
on kolmanda tasemega
on väike
on-ainult ikoon
nuppu
on-link
on-ainult ikoon
Vormi elemendid
vormi_välja-silt
vormi_sisend
vormi_sisend
on-tekst-ala
vormi_sisend
on-vali-sisend
vormi_märkeruut
vorm_raadio
nuppu
Aitäh! Teie avaldus on kätte saadud!
Ikoonid (pilt)

icon-height-xxsmall

icon-height-xsmall

ikoon-kõrgus-väike

ikoon-kõrgus-keskmine

ikoon-kõrgus-suur

ikoon-kõrgus-xlarge

icon-height-custom1

ikoon-1x1-xxsmall

ikoon-1x1-xsmall

ikoon-1x1-väike

ikoon-1x1-keskmine

ikoon-1x1-suur

ikoon-1x1-xlarge

ikoon-1x1-kohandatud1

Ikoonid (HTML Embed)
HTML-i manustamisikoonid võimaldavad teil hõljutades juhtida ikooni värvi.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Struktuuriklassid
Määratletud ja paindlik põhistruktuur, mida saame kasutada kõigil või enamikul lehtedel.
lehe ümbris
põhi-ümbris
konteiner-väike
konteiner-sööde
konteiner-suur
polster-globaalne
polsterdus-sektsioon-väike
polsterdus-sektsioon-keskmine
polsterdus-osa-suur
nuppude rühm
Maksimaalsed laiused
Kasutage atribuuti max-width CSS, et sisaldada sisemist sisu maksimaalse laiusega.
max-laius-täis
max-laius-täis-tahvelarvuti
max-width-full-mobile-landscape
max-width-full-mobile-portree
max-laius-xxsuur
max-laius-xsuur
max-laius-suur
max-laius-keskmine
max-laius-väike
max-laius-xväike
max-laius-xxväike
Polsterdused
Suuna klassid
polster-põhi
polsterdus-top
polsterdus-vertikaalne
polsterdus-horisontaalne
polster-vasak
polsterdus-õigus
Suurusklassid
polsterdus-0
polsterdus-pisike
polsterdus-xxsmall
polsterdus-xsmall
polsterdus-väike
polsterdus-keskmine
polster-suur
polster-xlarge
polster-xxlarge
polsterdus-suur
polsterdus-xhuge
polsterdus-xxhuge
polsterdus-kohandatud1
polsterdus-kohandatud2
polsterdus-kohandatud3
Marginaalid
Suuna klassid
margin-alumine
margin-top
marginaal-vertikaalne
marginaal-horisontaalne
margin-vasak
margin-parem
Suurusklassid
marginaal-0
marginaal-pisike
margin-xxsmall
margin-xsmall
marginaal-väike
marginaal-keskmine
marginaal-suur
marginaal-xlarge
margin-xxlarge
marginaal-suur
margin-xhuge
margin-xxhuge
marginaal-kohandatud1
marginaal-kohandatud2
marginaal-kohandatud3
Vahetükid
Projekti ühtne vahetükkide süsteem.
vahetükk-pisike
spacer-xxsmall
spacer-xsmall
vahetükk-väike
spacer-medium
vahetükk-suur
spacer-xlarge
spacer-xxlarge
vahetükk-suur
spacer-xhuge
spacer-xxhuge
Kasulikud klassid
Kasulikud kommunaalklassid, mida meile meeldib kiiremaks ehitamiseks kasutada enamikes oma projektides.
peita
See element on peidetud
peida-tablett
peida-mobiil-portree
peida-mobiil-maastik
ülevool-nähtav
ülevool-peidetud
ülevool-auto
ületäitumine-kerimine
pointer-events-auto
osuti-sündmused-puudub
kiht
vahekaugus-puhas
joonda-kesk
z-indeks-1
z-indeks-2
kuva-inlineflex
margin-top-auto
kuvasuhe-ruut
kuvasuhe-portree
kuvasuhe-maastik
kuvasuhe-laiekraan
pärand-värvi