Bileşenler
Card
İlgili içeriği ve işlemleri tek bir yüzeyde bir arada tutar.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Destek | Görsel değişiklik | Token’lar |
|---|---|---|---|
| Varsayılan | Var | Varyanta göre yüzey, kenarlık ya da gölge | color-surface-raised, color-surface-layer-1, color-border-subtle, shadow-raised |
| Üzerine gelme | Yalnızca interactive |
2 px yükselir, kenarlık koyulaşır | motion-hover-lift, color-border-default |
| Basılı | Yalnızca interactive |
Yükselme geri alınır; kart yerine oturur | - |
| Odak | Yalnızca interactive |
Card.Link odaklanınca kartın çevresinde 2 px halka, 2 px uzaklıkta |
color-focus-ring, border-width-focus |
| Devre dışı | Yok | Kartın kendi devre dışı durumu yok; içindeki denetimler kendi durumlarını taşır | - |
| Yükleniyor, boş, hata | Kompozisyon | Skeleton, EmptyState ve satır içi uyarı bileşenleriyle Card.Body içinde |
- |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Köşe yarıçapı | 14 px | card-radius |
| Kenarlık | outlined varyantta 1 px halka (yer kaplamaz; interactive kartta üzerine gelince koyulaşır); elevated ve filled varyantta yok |
border-width-default, color-border-subtle, color-border-default |
İç boşluk, sm |
12 px | space-lg |
İç boşluk, md |
16 px | space-xl |
İç boşluk, lg |
24 px | space-3xl |
| Parçalar arası boşluk | sm 12 px, md 16 px, lg 24 px |
space-lg, space-xl, space-3xl |
| Başlık ile açıklama arası | 2 px | space-xxs |
| Başlık ile işlem arası | 8 px | space-md |
| Başlık stili | 16 px / 24 px, yarı kalın | heading-sm |
| Açıklama stili | 14 px / 20 px | body-md |
| İçerik stili | 14 px / 20 px | body-md |
| Alt bölüm | Kartın tüm genişliğine yayılır; üstte 1 px çizgi ve renkli zemin taşır, iç boşluğu kartın iç boşluğuna eşittir, kartın alt iç boşluğu kalkar | color-border-subtle, color-surface-layer-1 |
| Baştaki ya da sondaki görsel | İlk ya da son doğrudan img çocuğu kart kenarlarına uzanır; kart onu köşelerinden kırpar |
Yok |
Token’lar
Bölüm başlığı “Token’lar”Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-layer-1 | #f5f5f5#f5f5f5#f5f5f5 | #262626#262626#262626 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-shadow-raised | 0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) | |
--bigbang-radius-lg | 10px10px10px | 10px10px10px | |
--bigbang-space-xl | 16px16px16px | 16px16px16px | |
--bigbang-space-3xl | 24px24px24px | 24px24px24px | |
--bigbang-motion-hover-lift | -2px-2px-2px | -2px-2px-2px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
Üzerine gelme (interactive) |
translate 0 → −2 px ve kenarlık rengi, motion-hover-duration (110 ms), motion-hover-easing (motion.lift) |
Yükselme 0 px; yalnızca kenarlık rengi değişir |
Basma (interactive) |
Yükselme aynı süreyle geri alınır | Hareket yok |
| Odak | Halka hemen görünür (0 ms) | Aynı |
| Durağan kart | Hareket yok | Azaltılacak bir şey yok |
Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.