Panduan Gaya

Client-First ialah satu set garis panduan dan strategi yang dibuat oleh Finsweet untuk membantu anda membina tapak web Webflow.

Kelas Struktur

Struktur teras yang jelas dan fleksibel yang boleh kami gunakan pada semua atau kebanyakan halaman.

pembalut halaman

pembalut utama

bekas-kecil

kontena-sederhana

bekas-besar

padding-global

padding-bahagian-kecil

padding-section-medium

bahagian padding-besar

kumpulan butang

Tag Tajuk HTML

Teg HTML mentakrifkan gaya Tajuk lalai.

Teks sampel membantu anda memahami rupa teks sebenar. Teks sampel sedang digunakan sebagai ruang letak.

Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.

Teks sampel sedang digunakan sebagai ruang letak. Teks sampel membantu anda memahami rupa teks sebenar. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.

Teks sampel sedang digunakan sebagai ruang letak. Teks sampel membantu anda memahami rupa teks sebenar. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar.

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar.

Tag HTML lain

Teg HTML mentakrifkan gaya teks lalai.

Semua perenggan

Semua pautan

Semua Pautan

Semua petikan

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda.

Semua Senarai Tertib

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.
Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.
Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.

Semua Senarai Tidak Tersusun

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.
Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.
Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.

Gaya Tajuk

Mengepalai kelas apabila gaya tipografi tidak sepadan dengan teg HTML lalai.

tajuk-gaya-h 1

Teks sampel membantu anda memahami rupa teks sebenar.

tajuk-gaya-h 2

Teks sampel sedang digunakan sebagai ruang letak. Teks sampel membantu anda memahami rupa teks sebenar.

tajuk-gaya-h 3

Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.

tajuk-gaya-h 4

Teks sampel sedang digunakan sebagai ruang letak. Teks sampel membantu anda memahami rupa teks sebenar. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.

tajuk-gaya-h 5

Teks sampel sedang digunakan sebagai ruang letak. Teks sampel membantu anda memahami rupa teks sebenar. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar.

tajuk-gaya-h 6

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar.

Kelas Teks

Kelas teks apabila gaya tipografi tidak sepadan dengan teg HTML lalai.

Saiz Teks

saiz-teks-besar

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.

teks-saiz-sederhana

Teks sampel digunakan sebagai pemegang tempat untuk teks sebenar yang biasanya terdapat di tapak web anda.

saiz-teks-biasa

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda.

saiz-teks-kecil

Teks sampel digunakan sebagai pemegang tempat untuk teks sebenar yang biasanya terdapat di tapak web anda. Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda.

saiz-teks-kecil

Teks sampel digunakan sebagai pemegang tempat untuk teks sebenar yang biasanya terdapat di tapak web anda. Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda.

Gaya Teks

teks-gaya-strikethrough

teks-gaya-italic

gaya teks diredam

teks-gaya-allcaps

teks-gaya-nowrap

pautan gaya teks

petikan gaya teks

Teks sampel sedang digunakan sebagai ruang letak.

teks-gaya-2baris

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda. Teks sampel sedang digunakan sebagai ruang letak untuk teks-gaya-2baris teks sebenar

gaya teks-3baris

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda. Teks sampel digunakan sebagai ruang letak untuk teks sebenar. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda. Teks sampel digunakan sebagai ruang letak untuk teks sebenar.

Berat Teks

teks-berat-xbold

teks-berat-tebal

teks-berat-separuh titik

teks-berat-sederhana

teks-berat-normal

teks-berat-ringan

Penjajaran Teks

text-align-left

text-align-center

text-align-right

Butang

Sistem kelas kombo butang.

butang

Teks Butang

butang

adalah-kecil

Teks Butang

butang

adalah-besar

Teks Butang

butang

adalah-menengah

Teks Butang

butang

adalah-teks

Teks Butang

butang

adalah-ikon

Teks Butang

warna

Urus teks berulang dan warna latar belakang.

Palet Warna

#00000

#f5f5f5

#fffff

Warna Teks

teks-warna-hitam

teks-warna-kelabu

teks-warna-putih

Warna Latar Belakang

warna latar belakang-hitam

latar belakang-warna-kelabu

latar belakang-warna-putih

Lebar maksimum

Gunakan sifat CSS lebar maksimum untuk mengandungi kandungan dalaman hingga lebar maksimum.

max-lebar-penuh

max-width-full-tablet

max-width-full-mobile-portrait

max-width-full-mobile-landskap

max-lebar-xxlarge

max-lebar-xlarge

maks-lebar-besar

maks-lebar-sederhana

maks-lebar-kecil

max-width-xsmall

max-lebar-xxsmall

Pelapis

Sistem jarak utiliti - kelas padding. [arah padding] + [saiz padding].

Kelas Arah

padding-bottom

padding-top

pelapik-menegak

padding-horizontal

padding-left

padding-kanan

Kelas Saiz

padding-0

padding-kecil

padding-xxsmall

padding-xsmall

padding-kecil

padding-medium

padding-besar

padding-xlarge

padding-xxlarge

padding-besar

padding-xhuge

padding-xxhuge

padding-custom1

padding-custom2

padding-custom3

Margin

Sistem jarak utiliti - kelas padding. [arah-margin] + [saiz-margin].

Kelas Arah

margin-bawah

margin-top

margin-menegak

margin-mendatar

margin-kiri

margin-kanan

Kelas Saiz

margin-0

margin-kecil

margin-xxsmall

margin-xsmall

margin-kecil

margin-sederhana

margin-besar

margin-xlarge

margin-xxlarge

margin-besar

margin-xhuge

margin-xxhuge

margin-custom1

margin-custom2

margin-custom3

Spacer

Sistem spacer bersatu untuk projek.

spacer-kecil

spacer-xxsmall

spacer-xsmall

spacer-kecil

spacer-medium

spacer-besar

spacer-xlarge

spacer-xxlarge

spacer-besar

spacer-xhuge

spacer-xxhuge

ikon

Satukan saiz ikon. ikon-ketinggian menetapkan ketinggian ikon. icon-1x1 menetapkan kedua-dua ketinggian dan lebar ikon.

ikon-tinggi-kecil

ikon-tinggi-sederhana

ikon-tinggi-besar

ikon-1x1-kecil

ikon-1x1-medium

ikon-1x1-besar

Sistem utiliti yang berguna

Kelas utiliti yang kami suka gunakan dalam kebanyakan projek kami untuk membina dengan lebih pantas.

bersembunyi

Unsur ini tersembunyi

tablet sorok

sembunyikan-potret mudah alih

sembunyi-mudah alih-landskap

limpahan-terlihat

limpahan-tersembunyi

limpahan-auto

limpahan-skrol

pointer-events-on

pointer-events-off

lapisan

div-square

jarak-bersih

align-center

indeks-z-1

indeks-z-2

paparan-inlineflex

Elemen aliran web

Elemen Webflow asli dengan kelas Client-First digunakan.

komponen_bentuk

Contoh komponen borang menggunakan Folder

Terima kasih! Penyerahan anda telah diterima!

Oops! Ada sesuatu yang tidak kena semasa menghantar borang.

teks-kaya-teks

Tajuk 1

Tajuk 2

Tajuk 3

Tajuk 4

Tajuk 5

Tajuk 6

Teks sampel dengan pautan sedang digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda. Teks sampel digunakan sebagai ruang letak untuk teks sebenar. Teks sampel digunakan sebagai ruang letak untuk teks sebenar. Teks sampel digunakan sebagai ruang letak untuk teks sebenar.

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.
Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.
Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.
Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.
Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.

Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada. Teks sampel membantu anda memahami rupa teks sebenar di tapak web anda. Teks sampel digunakan sebagai ruang letak untuk teks sebenar yang biasanya ada.