Stil Kılavuzu V3.0
Tipografi
HTML Başlık Etiketleri
HTML etiketleri varsayılan başlık stillerini tanımlar.
Tüm H1 Başlıkları

Kendinden emin, sağlıklı gülüşler için modern diş bakımı

Tüm H2 Başlıkları

Gülüşünüzün her aşaması için konfor odaklı diş hekimliği

Tüm H3 Başlıkları

Sakin bir klinik ortamında kişiye özel tedaviler

Tüm H4 Başlıkları

Daha iyi bir diş deneyimi özenli bakımla başlar

Tüm H5 Başlıkları
Koruyucu, estetik ve restoratif diş hizmetleri
Tüm H6 Başlıkları
Başlık — OMYGRUP stil kılavuzu tipografi örneği
Başlık Sınıfları
Tipografi stili varsayılan HTML etiketiyle eşleşmediğinde kullanılan başlık sınıfları.
heading-style-h1

Daha iyi bir diş deneyimi özenli bakımla başlar

heading-style-h2

Daha iyi bir diş deneyimi özenli bakımla başlar

heading-style-h3

Daha iyi bir diş deneyimi özenli bakımla başlar

heading-style-h4

Daha iyi bir diş deneyimi özenli bakımla başlar

heading-style-h5

Daha iyi bir diş deneyimi özenli bakımla başlar

heading-style-h6

Daha iyi bir diş deneyimi özenli bakımla başlar

Diğer HTML Etiketleri
HTML etiketleri varsayılan metin stillerini tanımlar.
Tüm Paragraflar

OMYGRUP'ta her detay, diş bakımını basit, konforlu ve güven verici kılmak için tasarlanır. Rutin kontrollerden ileri gülüş tedavilerine kadar ekibimiz; açık iletişime, nazik bakıma ve önce hasta anlayışına odaklanır.

Tüm Bağlantılar
Tüm Bağlantılar
Tüm Alıntı Blokları
Alıntı Bloğu
Tüm Sırasız Listeler
  • Madde işaretsiz liste

  • Madde işaretsiz liste

Tüm Sırasız Listeler
  • Madde işaretsiz liste

  • Madde işaretsiz liste

Tüm Sıralı Listeler
  1. Madde işaretsiz liste

  2. Madde işaretsiz liste

  3. Madde işaretsiz liste

Metin Boyutları
Tipografi boyutu varsayılan HTML etiketiyle eşleşmediğinde kullanılan metin boyutu sınıfları.
text-size-large

OMYGRUP'ta her detay, diş bakımını basit, konforlu ve güven verici kılmak için tasarlanır. Rutin kontrollerden ileri gülüş tedavilerine kadar ekibimiz; açık iletişime, nazik bakıma ve önce hasta anlayışına odaklanır.

text-size-medium

OMYGRUP'ta her detay, diş bakımını basit, konforlu ve güven verici kılmak için tasarlanır. Rutin kontrollerden ileri gülüş tedavilerine kadar ekibimiz; açık iletişime, nazik bakıma ve önce hasta anlayışına odaklanır.

text-size-regular

OMYGRUP'ta her detay, diş bakımını basit, konforlu ve güven verici kılmak için tasarlanır. Rutin kontrollerden ileri gülüş tedavilerine kadar ekibimiz; açık iletişime, nazik bakıma ve önce hasta anlayışına odaklanır.

text-size-small

OMYGRUP'ta her detay, diş bakımını basit, konforlu ve güven verici kılmak için tasarlanır. Rutin kontrollerden ileri gülüş tedavilerine kadar ekibimiz; açık iletişime, nazik bakıma ve önce hasta anlayışına odaklanır.

text-size-tiny

OMYGRUP, modern diş teknolojisini sıcak ve davetkâr bir bakım yaklaşımıyla birleştirir. Amacımız; koruyucu tedaviler, kişiye özel öneriler ve hastaların geldiği andan itibaren sakin hissettiren bir klinik deneyimiyle daha sağlıklı gülüşleri desteklemektir.

Metin Kalınlıkları
Tipografi kalınlığı varsayılan HTML etiketiyle eşleşmediğinde kullanılan metin kalınlığı sınıfları.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Metin Stilleri
Tipografi stili varsayılan HTML etiketiyle eşleşmediğinde kullanılan metin stili sınıfları.
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
OMYGRUP, modern diş teknolojisini sıcak ve davetkâr bir bakım yaklaşımıyla birleştirir. Amacımız; koruyucu tedaviler, kişiye özel öneriler ve hastaların geldiği andan itibaren sakin hissettiren bir klinik deneyimiyle daha sağlıklı gülüşleri desteklemektir.
text-style-3lines
OMYGRUP, modern diş teknolojisini sıcak ve davetkâr bir bakım yaklaşımıyla birleştirir. Amacımız; koruyucu tedaviler, kişiye özel öneriler ve hastaların geldiği andan itibaren sakin hissettiren bir klinik deneyimiyle daha sağlıklı gülüşleri desteklemektir.
text-style-muted
text-style-muted
text-style-tagline
text-style-tagline
text-color-white
text-color-white
Metin Hizalama
Tipografi hizalaması varsayılan HTML etiketiyle eşleşmediğinde kullanılan metin hizalama sınıfları.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Zengin Metin
text-rich-text

Gülüşünüze bakmanın daha sakin bir yolu

Düzenli diş ziyaretleri, küçük endişelerin daha büyük sorunlara dönüşmesini önlemeye yardımcı olur. OMYGRUP'ta ekibimiz her adımı açıklamaya, soruları yanıtlamaya ve her hastanın ihtiyacına göre tedavi önermeye zaman ayırır.

Koruyucu bakım neden önemli

Koruyucu diş hekimliği, uzun vadeli ağız sağlığının temelidir. Dişleri temiz, diş etlerini sağlıklı ve gülüşleri zamanla daha parlak tutmaya yardımcı olur.

Hastalar neler bekleyebilir

Hastalar sıcak bir danışma, nazik bir muayene ve sonraki adımları için net bir yönlendirme alır.

  • Rutin diş kontrolleri
  • Profesyonel diş temizliği
  • Kişiye özel ağız sağlığı tavsiyeleri
  • Diş sorunlarının erken teşhisi

İyi bir diş bakımı anlaşılır, destekleyici ve takip etmesi kolay hissettirmelidir.

Renkler
Renk Şemaları
Renklerinizi global renk şemalarıyla kolayca yönetin; uygulamak istediğiniz bölüme renk şeması sınıfını eklemeniz yeterli.
color-scheme-1

Scheme 1

Metin rengi

Arayüz Öğeleri
Butonlar
button
button
is-small
button
is-secondary
button
is-secondary
is-small
button
is-link
Koyu bir arka planda kullanmak için ek sınıfı kullanmanız yeterli is-alternate
button
is-alternate
button
is-alternate
is-small
button
is-secondary
is-alternate
button
is-secondary
is-small
is-alternate
button
is-link
is-alternate
Button
İkonlu Butonlar
button
is-icon
button
is-small
is-icon
button
is-secondary
is-icon
button
is-secondary
is-small
is-icon
button
is-link
is-icon
button
is-icon
is-alternate
button
is-small
is-icon
is-alternate
button
is-secondary
is-icon
is-alternate
button
is-secondary
is-small
is-icon
is-alternate
button
is-link
is-icon
is-alternate
Diğer Arayüz Öğeleri
Tags
Kartlarda, ürünlerde ve yazılarda bilgiyi kategorize eden veya öne çıkaran bağlanabilir etiketler
tag
Tag
tag
is-text
Tag
tag
is-alternate
Tag
tag
is-text
is-alternate
Tag
Form Öğeleri
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_radio
button
Teşekkürler! Formunuz bize ulaştı!
Hata! Form gönderilirken bir sorun oluştu.
Formları koyu bir arka planda kullanmak için ek sınıfı kullanmanız yeterli is-alternate
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_radio
button
Teşekkürler! Formunuz bize ulaştı!
Hata! Form gönderilirken bir sorun oluştu.
İkonlar (Görsel)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

İkonlar (HTML Gömülü)
HTML gömülü ikonlar, üzerine gelindiğinde ikon rengini kontrol etmenizi sağlar.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Köşe Yarıçapı
Büyük
Büyük yarıçap, genişliği 1 veya 2 sütun olan öğelere uygulanır.
Orta
Orta yarıçap, genişliği 2 ile 3 sütun arasında olan öğelere uygulanır.
Küçük
Küçük yarıçap, genişliği 4 sütundan küçük olan öğelere uygulanır.
Efektler
Gölgeler
Gölgeler, öğeleri bir z-ekseninde konumlandırarak tasarımlara derinlik ve gerçekçilik katmanızı sağlar.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Yapı Sınıfları
Tüm veya çoğu sayfada kullanabileceğimiz tanımlı ve esnek çekirdek yapı.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Maksimum Genişlikler
İç içeriği maksimum bir genişlikte tutmak için max-width CSS özelliğini kullanın.
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
İç Boşluklar
Yön Sınıfları
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Boyut Sınıfları
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Dış Boşluklar
Yön Sınıfları
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Boyut Sınıfları
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Ara Boşluklar
Proje için birleşik boşluk sistemi.
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Yardımcı Sınıflar
Daha hızlı geliştirmek için çoğu projemizde kullanmayı sevdiğimiz yardımcı sınıflar.
hide
Bu öğe gizli
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
margin-top-auto
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
inherit-color