Relume stila rokasgrāmata

Client-First V2.1 • Pēdējo reizi atjaunināts 2024. gada 9. janvārī
Tipogrāfija
HTML virsrakstu tagi
HTML tagi nosaka noklusējuma virsrakstu stilus.
Visi H1 virsraksti

1. virsraksts

Visi H2 virsraksti

2. virsraksts

Visi H3 virsraksti

3. virsraksts

Visi H4 virsraksti

4. virsraksts

Visi H5 virsraksti
5. virsraksts
Visi H6 virsraksti
6. virsraksts
Virsraksts Klases
Virsrakstu klases, ja tipogrāfijas stils neatbilst noklusējuma HTML tagam.
virsraksta stils-h1

Virsraksta stils-h1

virsraksta stils-h2

Virsraksta stils-h2

virsraksta stils-h3

Virsraksta stils-h3

virsraksta stils-h4

Virsraksta stils-h4

virsraksta stils-h5

Virsraksta stils-h5

virsraksta stils-h6

Virsraksta stils-h6

Citi HTML tagi
HTML tagi nosaka noklusējuma teksta stilus.
Visas rindkopas

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.

Visas saites
Visas saites
Visi bloķētie citāti
Bloķēt citātu
Visi nesakārtotie saraksti
  • Nav aizzīmju saraksta

  • Nav aizzīmju saraksta

Visi nesakārtotie saraksti
  • Nav aizzīmju saraksta

  • Nav aizzīmju saraksta

Visi sakārtotie saraksti
  1. Nav aizzīmju saraksta

  2. Nav aizzīmju saraksta

  3. Nav aizzīmju saraksta

Teksta izmēri
Teksts nosaka klases, ja tipogrāfijas lielums neatbilst noklusējuma HTML tagam.
teksta lielums-liels

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.

teksta lielums-vidējs

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.

teksta lielums-regulārs

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.

teksta izmērs-mazs

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.

teksta lielums-tiny

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.

Teksta svari
Teksta svara kategorijas, ja tipogrāfijas svars neatbilst noklusējuma HTML tagam.
text-weight-xbold
text-weight-xbold (800)
teksts-svars-treknrakstā
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
teksts-svars-vidējs
text-weight-medium (500)
teksts-svars-normāls
text-weight-normal (400)
teksts-svars-gaisma
text-weight-light (300)
Teksta stili
Teksta stila klases, ja tipogrāfijas stils neatbilst noklusējuma HTML tagam.
teksta stils - slīpraksts
teksta stils - slīpraksts
teksta stila pārsvītrojums
teksta stila pārsvītrojums
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
teksta stila citāts
teksta stila citāts
teksta stila saite
teksta stils-2 rindiņas
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.
teksta stils-3 rindiņas
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.
teksta stila izslēgts
teksta stila izslēgts
Teksta līdzināšana
Teksta līdzināšanas klases, ja tipogrāfijas līdzinājums neatbilst noklusējuma HTML tagam.
text-align-left
text-align-left
teksta izlīdzināšana centrā
teksta izlīdzināšana centrā
text-align-right
text-align-right
Bagātināts teksts
teksta bagātināts teksts

1. virsraksts

2. virsraksts

3. virsraksts

4. virsraksts

5. virsraksts
6. virsraksts
Šis ir bloka citāts

Bagātināta teksta elements ļauj izveidot un formatēt virsrakstus, rindkopas, citātus, attēlus un video vienuviet, nevis pievienot un formatēt tos atsevišķi. Vienkārši veiciet dubultklikšķi un viegli izveidojiet saturu.

Šī ir saite bagātinātā teksta iekšpusē

  • Saraksta vienums
  • Saraksta vienums
  • Saraksta vienums
  1. Saraksta vienums
  2. Saraksta vienums
  3. Saraksta vienums
Paraksts ir šeit
Krāsas
Fona krāsa
Pārvaldiet periodiskas fona krāsas.
fona krāsa-melna
fona krāsa-balta
background-color-primary
fona krāsa-sekundāra
background-color-terciary
fona-krāsa-alternatīva
Teksta krāsa
Pārvaldiet atkārtotas teksta krāsas.
teksts-krāsa-balts
teksts-krāsa-balts
teksts-krāsa-melns
teksts-krāsa-melns
text-color-primary
text-color-primary
teksts-krāsa-sekundārais
teksts-krāsa-sekundārais
text-color-alternate
text-color-alternate
Efekti
Kastes ēnas
Ēnas ļauj dizainam pievienot dziļumu un reālismu, novietojot elementus uz z ass.
ēna-xxsmall
shadow-xsmall
ēna-maza
ēna-vide
ēna-liela
ēna-xlarge
ēna-xxlarge
UI elementi
Pogas
pogu
pogu
ir-mazs
pogu
ir-sekundārais
pogu
ir-sekundārais
ir-mazs
pogu
ir terciārais
pogu
ir terciārais
ir-mazs
pogu
ir-saite
Lai izmantotu uz tumša fona, vienkārši izmantojiet pievienojumprogrammu klasi ir-alternatīvs
pogu
ir-alternatīvs
pogu
ir-alternatīvs
ir-mazs
pogu
ir-sekundārais
ir-alternatīvs
pogu
ir-sekundārais
ir-mazs
ir-alternatīvs
pogu
ir-saite
ir-alternatīvs
Poga
Pogas ar ikonām
pogu
ir-ikona
pogu
ir-mazs
ir-ikona
pogu
ir-sekundārais
ir-ikona
pogu
ir-sekundārais
ir-mazs
ir-ikona
pogu
ir-saite
ir-ikona
pogu
ir tikai ikona
pogu
ir-mazs
ir tikai ikona
pogu
ir-sekundārais
ir tikai ikona
pogu
ir-sekundārais
ir-mazs
ir tikai ikona
pogu
ir terciārais
ir tikai ikona
pogu
ir terciārais
ir-mazs
ir tikai ikona
pogu
ir-saite
ir tikai ikona
Veidlapas elementi
form_field-label
form_input
form_input
ir-teksta apgabals
form_input
ir-select-input
form_checkbox
forma_radio
pogu
Paldies! Jūsu iesniegums ir saņemts!
Ikonas (attēls)

ikona-augstums-xxsmall

icon-height-xsmall

ikona-augstums-mazs

ikona-augstums-vidējs

ikona-augstums-liela

ikona-augstums-xlarge

ikonas augstums-pielāgots1

ikona-1x1-xxsmall

ikona-1x1-xsmall

ikona-1x1-maza

ikona-1x1-vidēja

ikona — 1 x 1 liela

ikona-1x1-xlarge

ikona-1x1-pielāgots1

Ikonas (HTML iegulšana)
HTML iegulšanas ikonas ļauj kontrolēt ikonas krāsu, virzot kursoru.

icon-embed-xxsmall

icon-embed-xsmall

ikona-embed-small

ikona-iegult-vide

ikona-iegult-liela

ikona-embed-xlarge

icon-embed-custom1

Struktūras klases
Noteikta un elastīga pamatstruktūra, ko varam izmantot visās vai lielākajā daļā lapu.
lapas iesaiņotājs
galvenais iesaiņojums
konteiners-mazs
konteiners-vide
konteiners-liels
polsterējums-globāls
polsterējums-sekcija-maza
polsterējums-sekcija-vidēja
polsterējums-sekcija-liels
pogu grupa
Maksimālie platumi
Izmantojiet max-width CSS rekvizītu, lai ietvertu iekšējo saturu līdz maksimālajam platumam.
max-platums-pilns
max-platums-pilna-tablete
max-width-full-mobile-ainava
max-width-full-mobile-portrets
max-platums-xxliels
max-platums-xlarge
max-platums-liels
max-platums-vidējs
max-platums-mazs
max-platums-xmazs
max-platums-xxmazs
Polsterējumi
Virzienu klases
polsterējums-apakšā
polsterējums-top
polsterējums-vertikāls
polsterējums-horizontāls
polsterējums-pa kreisi
polsterējums-pa labi
Izmēru klases
polsterējums-0
polsterējums-niecīgs
polsterējums-xxsmall
polsterējums-xsmall
polsterējums-mazs
polsterējums-vidējs
polsterējums-liels
polsterējums-liels
polsterējums-xxlarge
polsterējums-milzīgs
polsterējums-xhuge
polsterējums-xxmilzīgs
polsterējums-pielāgots1
polsterējums-pielāgots2
polsterējums-pielāgots3
Piemales
Virzienu klases
piemale-apakšā
margin-top
margin-vertikāls
piemale-horizontāla
piemale-kreisais
mala-labais
Izmēru klases
margin-0
mala-niecīga
margin-xxsmall
margin-xsmall
starpība-maza
starpība-vidēja
margin-liels
margin-xlarge
margin-xxlarge
margin-milzīgs
margin-xhuge
margin-xxmilzīgs
margin-custom1
margin-custom2
margin-custom3
Starplikas
Vienota starpliku sistēma projektam.
starplikas-mazs
spacer-xxsmall
spacer-xsmall
starplika-maza
starplika-vide
starplika-liels
spacer-xlarge
spacer-xxlarge
starplika-milzīgs
spacer-xhuge
spacer-xxhuge
Lietderības klases
Noderīgas lietderības klases, kuras mums patīk izmantot lielākajā daļā mūsu projektu, lai ātrāk izveidotu.
paslēpties
Šis elements ir paslēpts
slēpt-tablete
slēpt-mobilais-portrets
slēpt-mobilā-ainava
pārplūde-redzams
pārpildīts-slēpts
pārplūdes-auto
pārpildīšana-ritināšana
pointer-events-auto
rādītājs-notikumi-nav
slānis
atstarpes-tīrs
izlīdzināt centrā
z-indekss-1
z-indekss-2
displejs-inlineflex
margin-top-auto
malu attiecība-kvadrāts
malu attiecība-portrets
malu attiecība-ainava
malu attiecība-platekrāna
mantot-krāsu