# CFPB tasarım sistemi

## CFPB tasarım sistemi Arayüz Önizlemesi

Yerel durumu sıfırlayın, ayrı bir kontrol listesi tutun ve yerel açıklamaları açın. On iki sütunlu düzenin nasıl üst üste yerleştiğini görmek için boyutu değiştirin.

## CFPB tasarım sistemi Tasarım Referansı

CFPB paketi 5.10.2 derlenmiş CSS ve ES modülü; güncel, herkese açık temel yönergeler. Demo, yerel Expandable sınıflarını ve JavaScript kullanır. Genel temel CSS, yayımlanan modülün temel stil dizgesinden aynen kopyalanmıştır; yedek olarak sistem yazı tipi kullanılır. Font-size-adjust ve aşağıdaki başlık satır yüksekliği, belgelerdeki tabloyla farklılık olduğunda sürümlenmiş koddaki değerleri izler. Herhangi bir CFPB logosu veya kurumsal bağlantı ima edilmez.

### Renkler ve gerçek özel özellikler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --black | #101820 | Varsayılan metin rengi; yeşili varsayılan gövde metni rengi olarak değil, marka vurgusu olarak kullanın. |
| --green | #20aa3f | Slug başlığı vurgusu ve kurumsal palet referansı. |
| --pacific | #0072ce | Bağlantı ve etkileşim ipuçları ailesi. |
| --gray-5 / --gray-40 | #f7f8f9 / #b4b5b6 | 5.10.2 sürümünde Expandable arka planı ve kenarlığı. |
| --red / --gold | #d14124 / #ff9e1b | Destekleyici palet; metinsel durum bilgisini yalnızca renkle değiştirmeyin. |
### Sürümlenmiş temel stillerdeki tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Current brand font | Source Sans 3 | Temmuz 2025'te Avenir Next'in yerini aldı; demoda paketin system-ui yedeği kullanılır. |
| Body | 16px / 1.375 | Varsayılan tarayıcı kök boyutunda 22px satır kutusu. |
| H1 | 34px / 1.25; weight 600 | <=600px boyutunda 26px; kodda masaüstü satır yüksekliği 42.5px. |
| H2 | 26px / 1.25; weight 600 | <=600px boyutunda 22px. |
| H3 / H4 | 22px weight 400 / 18px weight 500 | Küçük ekranlarda 18px / 16px; her ikisinde de satır aralığı 1.25. |
| H5 | 14px / 1.25; weight 600 | BÜYÜK HARF, 1px harf aralığı. |
| Normalization | base .517; step .0054 | Sürümlenmiş özel özellikler, başlıklar için kademeli olarak daha büyük ayarlamalar ekler; bu, sadeleştirilmiş temel tablo değerlerinden farklıdır. |
### Izgara, ritim ve duyarlı ekran aralıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Grid | 12 columns; 30px gutters | Belge düzeni modeli; demo, 8/4 editoryal bölünmüş düzen kullanır. |
| Maximum width | 1230px | Sabit genişlikli içerik yerine duyarlı dış kenar boşlukları kullanın. |
| Edge spacing | 15px mobile; 30px tablet/desktop | Dar ekranlarda okunabilir alanı koruyun. |
| Breakpoints | 0–600, 601–900, 901–1020, 1021–1200, 1201+ | 5.10.2 modülünde dışa aktarılan varsBreakpoints değerleri doğrulandı. |
| Text rhythm | 15px paragraph gap; 30px stacked headings | Editoryal aralıklar; evrensel bir 4px tasarım belirteci ölçeği olduğu iddiası değildir. |
| Measure | 66 characters ideal; 45–90 range | Kesintisiz okuma için yazı tipi yönergesi; önizlemede en fazla 66ch genişlik kullanılır. |
### Genişletilebilir bileşenin yapısı ve çalışma zamanı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Root | o-expandable | Arka plan ve kenarlık değiştiricileri, birbirinden bağımsız isteğe bağlı tercihlerdir. |
| Required descendants | __header, __label, __content | Başlık yerel bir düğmedir. Çalışma zamanı, davranış kancalarını ve ARIA durumunu ekler. |
| Initialization | Expandable.init(container) | Eşleşen kökler için başlatılmış örnekleri döndürür. |
| Instance API | expand(), collapse(), isExpanded(), getLabelText() | Eski toggleTargetState belgelendirme girdisi yerine, yayımlanmış 5.10.2 sürümüne göre doğrulanmıştır. |
| Initial expanded state | o-expandable--onload-open | Başlatmadan önce ayarlayın; çalışma zamanının görünürlük sınıflarını elle değiştirmeye çalışmayın. |
| Group choice | o-expandable-group--accordion | İsteğe bağlı, karşılıklı dışlayıcı davranış. Önizlemede farklı panellerin aynı anda açık olmasına özellikle izin verilir. |
## CFPB tasarım sistemi Tam Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## CFPB tasarım sistemi CFPB uygulama kapsamı

### Süslemeden önce tüketici bilgisi

> CFPB; editoryal bir bilgi mimarisini form ve açılır panel bileşenleriyle bir araya getirir. Izgarası, tipografi hiyerarşisi ve küçük, büyük harfli kısa başlıkları da tanıdık yeşil rengi kadar önemlidir. Bu örnek, özgün bir okuma çalışma sayfasıdır: temel yönlendirme görünür kalırken isteğe bağlı açıklamalar yerel Expandable bileşenlerini kullanır. Bu bir finansal öneri, şikâyet gönderimi veya kamu hizmeti değildir.

Paket herkese açıktır; ancak devlet mührü ve CFPB kimliği ayrı kısıtlamalara tabidir. Kodu yeniden kullanmak, bir hizmeti resmî kılmaz. Bu nedenle örnekte mühür, logo, resmî site bandı veya devlet kurumlarının başlık alanını taklit eden bir tasarım yoktur.

Destekleyici belirtimi okuyun

## CFPB tasarım sistemi Tipografi ve okuma ritmi

### Source Sans 3 ve sürüm farklılıkları

Güncel yazı tipi yönergeleri, Temmuz 2025'te Avenir Next'ten yapılan geçişin ardından Source Sans 3'ü belirtiyor. Yerel örnek, harici olarak barındırılan yazı tiplerine bağımlı değildir ve derlenmiş sistem yazı tipi yedeğini bilerek kullanır. Markalı, gerçek bir uygulama; belgelenmiş, lisanslı yazı tipi mixin'i aracılığıyla yetkili yazı tipi dosyalarını sağlamalıdır.

Herkese açık başlık tablosu ile geçerli temel stiller dizgesi birebir aynı değildir. 5.10.2 paketinde H1, 1,25 satır aralığıyla 2.125em'dir; 16px kök boyutunda bu, tablodaki 60px satır yüksekliği yerine 34/42.5 değerini verir. Yukarıdaki örnek, çalıştırılabilir kaynak kodunu temel alır. Başlık normalleştirmesi ayrıca her düzey için ayrı ayarlamalar kullanır; basitleştirilmiş tabloyu genel bir geçersiz kılma kuralına dönüştürmeyin.

Paragrafları yaklaşık 66 karakter genişliğinde tutun ve aralarında 15px boşluk bırakın. Kompakt H5/slug biçimi dışında başlıklarda cümle düzeninde büyük harf kullanın. Böylece her paragrafı bir karta zorlamadan kılavuz yazısını kolayca taranabilir hâle getirebilirsiniz.

Destekleyici belirtimi okuyun

## CFPB tasarım sistemi Renk ve editoryal çerçeve

### Yalnızca yeşili değil, kullanım amacını da gözetin

Derlenmiş CSS; --black, --green, --pacific ve derecelendirilmiş yardımcı renk ailelerini sunar. Metinde siyah kullanılır; Pacific ise daha belirgin bir etkileşim işareti sağlar. Açık gri Expandable arka planı devre dışı durumu değil, okuma alanının sınırını belirtir. Yerel slug başlıkları, tam genişlikte ince gri bir çizgiyi daha kalın ve kısa yeşil bir çizgiyle birleştirir.

Çalışma sayfasının ana okuma yüzeyi bilerek beyaz bırakılmıştır. Yeşil, bölüm ayırıcısında kullanılır; ilerleme sayısıysa kolayca okunabilen sıradan bir metindir. Bir öğe tamamlandığında veya işaretlendiğinde, yeşili kırmızıdan ayırt etmeye gerek kalmadan durum anlaşılır. Sayfa, her palet örneği için başarı ya da hata anlamı uydurmaz.

- Sakin bir açılır panel yüzeyi için --gray-5, kenarlık için --gray-40 kullanın.

- Bağlantıları, renklerinin yanı sıra alt çizgileri veya etkileşim biçimleriyle de ayırt edilebilir kılın.

- Kimlik işaretlerini yalnızca yetkili kullanım için ayırın; palet lisansı, bağlılık izlenimi verme izni değildir.

Destekleyici belirtimi okuyun

## CFPB tasarım sistemi On iki sütun ve kullanışlı yoğunluk

### İşlevsel kenar boşluklarına sahip bir yazı

Belgelenmiş ızgara; on iki sütun, sabit 30px sütun aralıkları ve 1230px maksimum genişlik kullanır. Mobilde dış boşluk 15px, daha büyük düzenlerdeyse 30px'tir. Önizleme, bunu 901px ve üzerindeki genişliklerde sekiz sütunlu bir okuma alanı ve dört sütunlu bir çalışma kontrol listesi olarak uygular; daha dar düzenlerde kontrol listesi yazının altına taşınır. Bu ayrım, yayımlanmış ızgarayı kullanan bir uygulama düzenlemesidir; resmî ve evrensel bir sayfa şablonu değildir.

Sayfa daha da genişleyebilecek olsa bile uzun metinler 66ch maksimum genişliğini korur. Düğmeler gerektiğinde alt satıra geçer; kenar çubuğunda sabit yükseklik veya iç içe kaydırma alanı yoktur. Bir açıklamanın açılması, belgenin olağan yüksekliğini artırır; böylece aynı düzen kaynak sayfasının gömülü önizlemesinde de kullanılabilir.

Destekleyici belirtimi okuyun

## CFPB tasarım sistemi Yerel Expandable yapısı

### Tetikleyiciyi ve isteğe bağlı içeriği ayrı tutun

Eski bir Expandable kökü, __header düğmesi, __label ve __content bölgesi içerir. Odaklanma hedefi düğmedir. Bu örnekte etiketi bir span sağlar; dekoratif artı/eksi işaretleri erişilebilir addan gizlenir. Başlatma sırasında kitaplık, genişletilmiş durumunu ve davranış kancalarını atar; uygulama bu değişiklikleri yinelemez.

--background ve --border değiştiricileri çerçeveli görünümü sağlar. --padded değiştiricisi, etiketi de buna uygun biçimde büyüten daha geniş bir sunum seçeneğidir; her açılır panelde kullanılması gerekmez. Okurların isteğe bağlı açıklamaları açmadan önce görevi anlayabilmesi için çalışma sayfasındaki kritik yönergeler gizli panelin dışında tutulur.

```
<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>
```

Kod referansı

Destekleyici belirtimi okuyun

## CFPB tasarım sistemi Açılır paneller ve kontrol listesi davranışı

### Birbirinden bağımsız iki durum türü

Açılır panel durumunu yerel kitaplık yönetir. Çalışma sayfası, üç standart onay kutusunun değerlerini ve bunlardan elde edilen sayıyı yönetir. Bir paneli açmak görevi tamamlanmış olarak işaretlemez; bir görevi işaretlemek de bilgileri daraltmaz. Bunlar bilerek ayrı tutulan modellerdir: görünürlük, kavrayışın kanıtı değildir.

5.10.2 örneği expand, collapse ve isExpanded özelliklerini sunar. Herkese açık Expandables sayfasında eski bir toggleTargetState başvurusu yer aldığından bu kılavuz, sürüm numarası belirtilmiş gerçek API sürümünü kullanır. Tümünü aç ve Tümünü kapat işlemleri başlatılmış örnekler üzerinde çalışır. Okurlar iki açıklamayı karşılaştırabileceği için panellerin bağımsız olması burada daha uygundur.

Sıfırlama işlemi, tüm onay kutularını temizler ve kitaplığın API aracılığıyla panelleri daraltır. Gönderimin onaylandığına dair uydurma bir mesaj oluşturmaz. İlerleme, her onay kutusu değişikliğinde klavye odağını taşımadan kibar bir durum öğesi aracılığıyla duyurulur.

Destekleyici belirtimi okuyun

## CFPB tasarım sistemi Derlenmiş varlıklar ve temel stiller

### Klasik betik değil, ES modülü

Sabitlenmiş paketi yükleyin, derlenmiş iki varlığı statik dizininize kopyalayın ve bir modül betiğiyle Expandable'ı içe aktarın. Yayımlanan 5.10.2 index.js, ES dışa aktarımları içerir; bu nedenle eski entegrasyon örneğinden kopyalanan klasik betik etiketi söz dizimi hatasına yol açar. Ayrıca eski Expandable köklerini otomatik olarak başlatmaz.

Bileşen stil sayfası tek başına, sayfa genelindeki başlık ve gövde kurallarını içermez. Üretim projeleri, resmî entegrasyon kılavuzunda gösterildiği gibi paketin temel SCSS dosyasını derleyebilir. Bu yalıtılmış örnekse, aynı yayımlanmış modülün içine gömülü olan tam temel CSS dizgesini korur ve bunu ayrı belgelenmiş yerel bir dosya olarak sunar. Bu çıkarım, yerel bir paketleme tercihidir; CFPB tarafından yeni yayımlanmış bir giriş noktası değildir.

Simge başvuruları içeren kaynak SCSS derliyorsanız projenin belgelenmiş PostCSS SVG değiştirme aracını ekleyin. Derlenmiş anlık görüntüde bu başvurular zaten çözümlenmiştir. --cfpb-background-icon-svg değişkenini çözümsüz bırakan, yalnızca Sass kullanan bir kurulum uydurmayın.

1. 5.10.2 sürümünü yükleyin ve yerel olarak sunulan varlıkların yanında TERMS.md dosyasını da bulundurun.

2. Bileşen CSS dosyasını seçtiğiniz genel temel stillerle birlikte yükleyin; yazı tiplerini açıkça yapılandırın.

3. Modül içe aktarımı kullanın, işaretlemesi oluşturulduktan sonra kapsayıcıyı başlatın ve ardından uygulama eylemlerini döndürülen örneklere bağlayın.

Destekleyici belirtimi okuyun

## CFPB tasarım sistemi Okuma akışını doğrulayın

### Erişilebilirlik sınaması yalnızca açılır panellerden ibaret değildir

Dar ekranlarda yerel temel stiller ana başlığın boyutunu küçültür ve kontrol listesini yazının altına taşır. Masaüstü genişliğinde iki sütunlu düzen, isteğe bağlı okuma içeriğini ve çalışma notlarını yan yana gösterir. Yalnızca kapalı durumdayken değil, tüm paneller açıkken de her iki görünümü sınayın.

Her yerel düğmeye ulaşmak için Tab tuşunu, açıp kapatmak için Enter veya Boşluk tuşunu kullanın. Kitaplığın aria-expanded değerini güncellediğini ve gizli içeriğin artık sekme sırasına girmediğini doğrulayın. Ardından iki görevi işaretleyin, tüm açıklamaları açıp kapatın ve sıfırlanana kadar sayının iki olarak kaldığını kontrol edin. Bu testler, ekran görüntüsünde görünmeyen uygulama ve kitaplık durumu çatışmalarını ortaya çıkarır.

Bu yerel örnek; depolama, analiz, ağ üzerinden gönderim veya gerçek kişisel veri kullanmaz. Yalnızca yerel bileşenleri kullanmak, ortaya çıkan sitenin erişilebilirliğini belgelemez; uygulamayı benimseyen hizmette kontrast, içerik, tarayıcı desteği ve yardımcı teknoloji davranışı yine de incelenmelidir.

Destekleyici belirtimi okuyun

## CFPB tasarım sistemi Bileşen Örnekleri

### Yerel bir Expandable

Gerekli eski yapı, dekoratif işaretler ve isteğe bağlı açıklayıcı içerik.

```
<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>
```

Kod referansı

### Açılır panelleri başlatma ve denetleme

5.10.2 modülünü ve döndürülen örnekleri kullanın; genel temel stiller ayrı bir tercihtir.

```
npm install --save-exact @cfpb/cfpb-design-system@5.10.2
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/

# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
  import { Expandable } from '/vendor/cfpb/index.js';
  const panels = Expandable.init(document.querySelector('#guide'));
  document.querySelector('#open-all').addEventListener('click', () => {
    panels.forEach(panel => panel.expand());
  });
  document.querySelector('#close-all').addEventListener('click', () => {
    panels.forEach(panel => panel.collapse());
  });
</script>
```

Kod referansı

- Yayımlanmış 5.10.2 bir ESM'dir. Klasik betik olarak yüklemeyin.

- Örnekte, paketin temel stillerinden sözcüğü sözcüğüne çıkarılmış ve tedarikçi SOURCE.md dosyasında belgelenmiş içerik kullanılır.

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CFPB reading worksheet specimen</title><link rel="stylesheet" href="vendor/cfpb-5.10.2/index.css"><link rel="stylesheet" href="vendor/cfpb-5.10.2/base-extracted.css"><style>*{box-sizing:border-box}body{margin:0;background:#fff}main{max-width:1230px;margin:auto;padding:30px}header{max-width:66ch;margin-bottom:30px}.layout{display:grid;grid-template-columns:2fr 1fr;gap:30px}.article{min-width:0}.o-expandable{margin:15px 0}.toolbar{display:flex;gap:15px;flex-wrap:wrap;margin:15px 0}.notes{border-top:5px solid var(--gray-40);padding-top:15px}.notes label{display:flex;gap:10px;margin:20px 0;align-items:flex-start}.notes input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--pacific)}.o-expandable__content p{max-width:66ch}.eyebrow{color:var(--gray);font-size:14px}.note{font-size:14px;margin-top:30px;color:var(--gray)}button{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pacific);outline-offset:3px}@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:600px){main{padding:20px 15px}}</style><main><header><p class="eyebrow">Independent educational specimen · CFPB components</p><h1>Make your question easier to answer</h1><p>Use this reading worksheet to organize a question about an unfamiliar document. No information is submitted or saved.</p></header><div class="layout"><section class="article" id="guide"><div class="m-slug-header"><h2 class="m-slug-header__heading">Before a conversation</h2></div><p>A useful question identifies the document, quotes the unclear wording, and says what you want explained. Keep account numbers and other private details out of this practice worksheet.</p><div class="toolbar"><button id="open-all" class="a-btn a-btn--secondary">Open all explanations</button><button id="close-all" class="a-btn a-btn--secondary">Close all</button></div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Separate a question from a request</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>“What does this label mean?” asks for an explanation. “Please send a copy” asks for an action. Writing them separately makes the desired response easier to identify.</p>
  </div>
</div><p class="note">Original practice content. This example does not provide financial advice or represent a CFPB service.</p></section><aside class="notes"><h2>Your working notes</h2><p>Use the checklist as a local memory aid.</p><label><input type="checkbox">I can name the document I am asking about.</label><label><input type="checkbox">I have identified the wording I want explained.</label><label><input type="checkbox">I know whether I need an explanation or an action.</label><p id="count" role="status" aria-live="polite">0 of 3 notes checked</p><button id="reset" class="a-btn">Reset worksheet</button></aside></div></main><script type="module">import {Expandable} from './vendor/cfpb-5.10.2/index.js';const panels=Expandable.init(document.querySelector('#guide'));document.querySelector('#open-all').onclick=()=>panels.forEach(x=>x.expand());document.querySelector('#close-all').onclick=()=>panels.forEach(x=>x.collapse());const checks=[...document.querySelectorAll('input[type=checkbox]')];const update=()=>document.querySelector('#count').textContent=checks.filter(x=>x.checked).length+' of 3 notes checked';checks.forEach(x=>x.onchange=update);document.querySelector('#reset').onclick=()=>{checks.forEach(x=>x.checked=false);update();panels.forEach(x=>x.collapse())};window.demoReady=true;</script></html>
```

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## CFPB tasarım sistemi Yapay Zekâ Aracısı Kurulumu

### Uygulamaya Başlangıç Noktası

Yerel demo, derlenmiş yerel 5.10.2 modülünü ve CSS dosyasını çalıştırır. npm kopyalama komutu bir projede kullanılmak üzere sunulmuştur; kaynak SCSS derlemeleri ayrıca belgelenmiş simge işleme adımını gerektirir. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP'i, önizlemenin tam bağımlılıklarını ve belgenin tamamını da içerir. ZIP'i çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/cfpb.html adresini açın. Modül kullanan örnekleri file:// üzerinden açmayın.

```
npm install --save-exact @cfpb/cfpb-design-system@5.10.2
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/

# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
  import { Expandable } from '/vendor/cfpb/index.js';
  const panels = Expandable.init(document.querySelector('#guide'));
  document.querySelector('#open-all').addEventListener('click', () => {
    panels.forEach(panel => panel.expand());
  });
  document.querySelector('#close-all').addEventListener('click', () => {
    panels.forEach(panel => panel.collapse());
  });
</script>
```

### Projeniz İçin Bir İstem

```
Gerçek 5.10.2 Expandable modülünü kullanan, CFPB'den esinlenilmiş bağımsız bir editoryal çalışma sayfası oluşturun. Gerekli üstbilgi/etiket/içerik yapısını, tümünü açma ve tümünü kapatma eylemlerini ve açılır içerik değişikliklerinde değerleri koruyan standart bir onay kutusu listesi ekleyin. On iki sütunlu 8/4 düzeni kullanın; 901px'in altında sütunlar üst üste gelsin, mobil kenar boşlukları 15px ve metin satır uzunluğu 66ch olsun. Temel tipografiyi CSS bileşeninden ayrı belirtin. CFPB kimlik işaretleri, finansal tavsiye, sahte gönderim veya ESM paketi için classic-script içe aktarımları eklemeyin.
```

## CFPB tasarım sistemi Kaynaklar ve Kapsam

Bağımsız uygulama referansı. Yerel paket bileşenleri CFPB ile bağlantı kurulduğu anlamına gelmez. Özgün eğitim içeriği; finansal tavsiye veya gönderim yoktur. Yeniden kullanmadan önce TERMS.md dosyasını inceleyin.

- Yazı tipleri Geçerli yazı tipi, normalizasyon ve okuma ritmi.

- Başlıklar Duyarlı başlık hiyerarşisi; sürümlenmiş kodla karşılaştırın.

- Renk CFPB renk paleti ve kullanım yönergeleri.

- Izgara On iki sütun, oluklar ve maksimum genişlik.

- Genişlet Bileşen yapısı ve varyantları.

- Kurulum Paket ve kaynak derleme entegrasyonu.

- Tasarım belirteçleri Daha yeni belirteç işlem hattının kapsamı.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## CFPB tasarım sistemi İlgili Kaynaklar

### CMS tasarım sistemi

Sürümlenmiş tema değişkenleri, gerçek Review bileşeni API’leri ve kullanıcı yanıtlarıyla odağı koruyan çalışan düzenleme ve inceleme akışıyla CMS Core’u uygulayın.

### Det Fælles Designsystem

Denmark’ın DKFDS temasını, gerçek Sass ölçeklerini ve erişilebilir tablo kalıplarını; sayısal sıralama, gönderilen arama ve boş durumdan kurtarma içeren eksiksiz bir kaynak karşılaştırmasıyla keşfedin.

### tasarım sistemi .italia

Bootstrap Italia’nın gerçek tipografisi, duyarlı Stepper yapısı ve kurtarılabilir yerel form durumuyla okunaklı bir hizmet adımları akışı uygulayın.


- [Uygulama başvurusu](https://cfpb.github.io/design-system/components/expandables)
- [Kaynak](https://cfpb.github.io/design-system/foundation/color)
- [Kaynak](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js)
- [Kaynak](https://cfpb.github.io/design-system/foundation/grid)
- [Destekleyici belirtimi okuyun](https://cfpb.github.io/design-system/)
- [Destekleyici belirtimi okuyun](https://cfpb.github.io/design-system/foundation/fonts)
- [Destekleyici belirtimi okuyun](https://cfpb.github.io/design-system/foundation/color)
- [Destekleyici belirtimi okuyun](https://cfpb.github.io/design-system/foundation/grid)
- [Kod referansı](https://cfpb.github.io/design-system/components/expandables)
- [Destekleyici belirtimi okuyun](https://cfpb.github.io/design-system/components/expandables)
- [Destekleyici belirtimi okuyun](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js)
- [Destekleyici belirtimi okuyun](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [Kod referansı](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [Yazı tipleri Geçerli yazı tipi, normalizasyon ve okuma ritmi.](https://cfpb.github.io/design-system/foundation/fonts)
- [Başlıklar Duyarlı başlık hiyerarşisi; sürümlenmiş kodla karşılaştırın.](https://cfpb.github.io/design-system/foundation/headings)
- [Renk CFPB renk paleti ve kullanım yönergeleri.](https://cfpb.github.io/design-system/foundation/color)
- [Izgara On iki sütun, oluklar ve maksimum genişlik.](https://cfpb.github.io/design-system/foundation/grid)
- [Genişlet Bileşen yapısı ve varyantları.](https://cfpb.github.io/design-system/components/expandables)
- [Kurulum Paket ve kaynak derleme entegrasyonu.](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [Tasarım belirteçleri Daha yeni belirteç işlem hattının kapsamı.](https://cfpb.github.io/design-system/development/design-tokens)