# CMS tasarım sistemi

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

Bir tercihi düzenleyin, taslağı kaydedin veya atın ve veri göndermeden yerel bir incelemeyi tamamlayın.

## CMS tasarım sistemi Tasarım Referansı

CMS Core 18.1.0, core-theme.css ve bileşen CSS dosyasını yayımladı. Genel dokümantasyondaki ifadelerle farklılık olduğunda sürümlenmiş çıktı esas alınır. Önizlemede Arial yedeği ve uygulamaya özgü 48rem kabuk kullanılır.

### Renk rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --color-base | #262626 | Sürümlenmiş Core metin değeri; eski genel bakış metninde #333 yazıyor. |
| --color-primary / primary-darker | #0071bc / #004f84 | Eylem ve koyu etkileşim referansları. |
| --color-error / success | #e31c3d / #12890e | Durum rengini her zaman metinsel bir açıklamayla birlikte kullanın. |
| --color-border | #d9d9d9 | --review__border-color tarafından da kullanılır. |
| --color-focus-dark / focus-light | #bd13b8 / #ffffff | Tema odak referansları. |
| --color-background / gray-lightest | #ffffff / #f2f2f2 | Sayfa ve açık destekleyici yüzeyler. |
### Tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --font-family-body / heading | Open Sans, Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif | 18.1.0 sürümündeki tam aile sırası; önizlemede Arial kullanılır. |
| --font-size-sm / md / lg / xl / 2xl | .875 / 1 / 1.125 / 1.3125 / 1.5rem | 16px kök boyutunda 14 / 16 / 18 / 21 / 24px. |
| --font-size-3xl--mobile / 3xl | 1.875 / 2.25rem | 30 / 36px. |
| --font-size-4xl--mobile / 4xl | 2.25 / 3rem | 36 / 48px. |
| --font-size-5xl--mobile / --tablet / 5xl | 2.25 / 3 / 3.75rem | 36 / 48 / 60px. |
| --font-line-height-base / heading | 1.5 / approximately 1.3 | Tema, başlık değerini 1.2999999523162842 olarak saklar. |
### Boşluk, ızgara ve şekil

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --spacer-half / 1 / 2 / 3 | 4 / 8 / 16 / 24px | Yardımcı sınıflardaki sayısal değiştiriciler 8px ile çarpılır. |
| --spacer-4 / 5 / 6 / 7 | 32 / 40 / 48 / 56px | Daha geniş düzen ritmi. |
| --grid-columns | 12 | Izgara düzeni. |
| --grid-gutter-width / grid-form-gutter-width | 32 / 16px | Geçerli temada genel ve form boşluklarını birbirinden ayırın. |
| --site-max-width | 1104px | Tema kapsayıcı referansı. |
| --site-margins / site-margins-mobile | 3rem / 1.5rem | Standart kök boyutunda 48 / 24px. |
| --radius-default / medium / large | 3 / 4 / 8px | Tek bir evrensel köşe yuvarlatma değeri değildir. |
### Duyarlı tasarım sınırları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| sm | 544px | Önce küçük ekranlar için kullanılan önek. |
| md | 768px | Orta ekran öneki. |
| lg | 1024px | Büyük ekran öneki. |
| xl | 1280px | Ekstra büyük ekran öneki. |
## CMS 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ı.

## CMS tasarım sistemi Core veya bir alt tema seçin

### Paket, markalı tek bir görünüm değil, bir ürün ailesidir

> CMS Core, ortak arayüz temellerini sunarken Healthcare.gov, Medicare.gov ve CMS.gov için ayrı alt sistemler sağlar. Bu referans, @cmsgov/design-system 18.1.0 sürümünü ve core-theme.css dosyasını temel alır. Bir alt temada bulunan renk, logo veya bileşen, otomatik olarak Core kuralı sayılmaz. Örnekte özellikle tarafsız bir bildirim tercihi iş akışı kullanılmış; resmî devlet banner’ları ve kimlik işaretleri kullanılmamıştır.

React, Preact, web bileşeni ve manuel HTML/CSS entegrasyon seçenekleri vardır. Belgeler, yerleşik davranışları kullanışlı olduğunda JavaScript bileşenlerini önerir; web bileşeni koleksiyonu bunların bir alt kümesidir. Bağımsız örneğimiz, düzenleme/kaydetme/iptal işlemleri için uygulama JavaScript’siyle birlikte gerçek Core CSS kullanır. CSS’ün doğrulama, yönlendirme veya kalıcılık sağladığını iddia etmez.

Destekleyici belirtimi okuyun

## CMS tasarım sistemi Sürümlenmiş temayı okuma

### Her iki stil sayfasını da ekleyin

index.css bileşen kurallarını tanımlar, core-theme.css ise bu kuralların değişkenlerini sağlar. Tema eklenmezse geçerli sınıf adlarının değerleri çözümlenmeden kalabilir. Buna karşılık, sayfa görüntülense bile Core tipografisini anlatırken Medicare teması içe aktarmak yanıltıcı olur. Kurulumda aynı 18.1.0 sürümündeki her iki kaynak da kullanılır.

Bu kılavuzdaki sayısal değerlerin kaynağı sürümlenmiş temadır. Örneğin --color-base değeri #262626’dır; ancak genel tipografi açıklamasında hâlâ #333’ten söz edilir. Temadaki --grid-gutter-width, --spacer-4 değerine (32px) karşılık gelirken --grid-form-gutter-width, --spacer-2 değerine (16px) karşılık gelir. 16px boşlukları tanımlayan genel bir cümle, her grid çeşidine uygulanmamalıdır. Gerçek bir düzeni yeniden oluştururken bu farklar önem taşır.

Destekleyici belirtimi okuyun

## CMS tasarım sistemi Core tipografisi ve hiyerarşisi

### Tek yazı tipi ailesi, belirgin rol boyutları

Core, başlıklar ve gövde içeriği için Open Sans kullanır. 18.1.0 temasındaki yedek yazı tipi zinciri Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial ve sans-serif ile devam eder. Yerel örnek, harici yazı tipi dosyaları istememek için açıkça Arial kullanır; bu nedenle ölçüleri resmî tipografinin tamamından farklıdır.

Gövde metninin temel boyutu 1rem, satır yüksekliği 1.5’tir. Boyut değişkenleri, 16px kök boyutunda 14, 16, 18, 21 ve 24px değerlerini içerir; ardından duyarlı daha büyük roller gelir: 3xl mobilde 30px, diğer durumlarda 36px; 4xl mobilde 36px, diğer durumlarda 48px; 5xl mobilde 36px, tablette 48px ve en büyük rolünde 60px’tir. Bunlar tema değerleridir; en büyük boyutu her sayfa başlığında kullanma izni değildir. Anlamsal başlıkları ve uygun yardımcı sınıfı ya da ds-content eşlemesini kullanın.

Destekleyici belirtimi okuyun

## CMS tasarım sistemi Boşluklar ve duyarlı düzen

### Sekiz piksellik ritim ve yarım adım

--spacer-1 ile --spacer-7 arasındaki değişkenler, sekiz piksellik artışlarla 8–56px değerlerine karşılık gelir. --spacer-half 4px, --spacer-none ise sıfırdır. Bu nedenle ds-u-margin--2 gibi bir sınıf 2rem değil, 16px anlamına gelir. İnceleme satırının yerel CSS’si dikeyde 16px dolgu ve altta 2px kenarlık sağlar; formun her yanıtını ayrıca dolgulu bir kartla çevrelemek gerekmez.

Core’un site için belirlediği azami genişlik 1104px’tir. Sürümlenmiş temada site kenar boşlukları 3rem, mobil kenar boşlukları ise 1.5rem’dir. Örnekte iki kısa inceleme satırı için daha küçük, 48rem genişliğinde bir okuma alanı seçilmiştir. Bu, uygulamaya özgü bir genişliktir; yeni bir CMS belirteci değildir.

Destekleyici belirtimi okuyun

### CMS kesme noktası öneklerini kullanın

Belgelenen sınırlar sm için 544px, md için 768px, lg için 1024px ve xl için 1280px’tir. Düzenler ve seçili yardımcı sınıf aileleri, örneğin ds-u-lg-display--none gibi bu önekleri kabul eder. Her bileşen sınıfının duyarlı bir çeşidi olduğunu varsaymayın. Mobilde incelemedeki uzun değer, Düzenle denetimini ekranın dışına itmeden satır kaydırmalıdır; önizleme de gerektiğinde uygulama eylem satırını dikey olarak düzenler.

Destekleyici belirtimi okuyun

## CMS tasarım sistemi İnceleme satırının yapısı ve API

### Etiket, değer ve bağlama uygun düzenleme hedefi

Review, incelenebilir tek bir öğeyi kapsar. Başlığı varsayılan olarak h3’tür, headingLevel ile değiştirilebilir ve ardından geçerli değeri temsil eden children gelir. editHref bir hedef belirtir; bu özellik olmadan düzenleme bağlantısı gösterilmez. editAriaLabel, yinelenen görünür Düzenle bağlantısına erişilebilir ve açık bir ad verir. 18.1.0 tür tanımı ayrıca editText, onEditClick ve varsayılan bağlantının yerine geçen editContent özelliklerini de sunar.

React örneğinde, yayımlanmış tür tanımında doğrulanan gerçek özellikler kullanılır. Yollar, kullanan uygulamanın uygulaması gereken örnek uygulama rotalarıdır. Yerel CSS alternatifi ds-c-review, ds-c-review__content ve ds-c-review__heading yapısını gösterir; gezinme ve güncellemeleri yine uygulamanın yönetmesi gerekir.

```
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}
```

Kod referansı

Destekleyici belirtimi okuyun

## CMS tasarım sistemi Satır düzenleme ve bölüm düzenleme

### Düzeltme yolunu öngörülebilir tutun

CMS form inceleme örüntüsü, tek bir yanıtı düzenlemekle bütün bir bölümü düzenlemeyi birbirinden ayırır. Bildirim biçimi ve dil tercihi gibi bağımsız yanıtlar satır düzenlemeye uygundur. Hane üyeleri ve bunlarla ilişkili bağlar gibi birbiriyle bağlantılı yanıtlar, tutarlılığı birlikte yeniden hesaplayabilmesi için bölüm düzenleme gerektirebilir. Resmî kılavuz, bölüm düzeyindeki Düzenle seçeneğinin bölüm başlığının yanına yerleştirilmesinin Review bileşeni tarafından uygulanmadığını açıkça belirtir.

Önizleme, seçilen satır için odaklanmış bir fieldset açar. Kaydet yalnızca o değeri günceller ve odağı işlemi başlatan Düzenle denetimine geri getirir; İptal taslağı siler. Düzenleyici açıkken de görünür yanıtı değiştirmeden korur. Yerel durum iletisi, yalnızca düzenleme formunun açıldığını başarı olarak duyurmak yerine gerçekten yapılan değişikliği bildirir.

- Giriş ve inceleme adımlarında aynı soru etiketlerini ve sıralamasını kullanın.

- Görünür bağlantı Düzenle dese bile her satır için bağlama uygun bir düzenleme adı sağlayın.

- İlişkili yanıtların birlikte değiştirilmesi gerekiyorsa bölüm düzenlemeyi tek satırlı bileşenin dışında tutun.

Destekleyici belirtimi okuyun

## CMS tasarım sistemi İnceleme, tamamlama ve doğruluk

### İnceleme, gönderim makbuzu değildir

Review, düzenlenebilir form yanıtları için uygundur; arama sonuçlarının yerine kullanılamaz. Gerçek bir gönderim akışında, bu örüntü incelemenin ardından son bir gönderme eylemi gerektirir. Makbuz gösterilmeden önce bu eylem, gerçek bir arka uç sonucunu yansıtmalıdır. Bu örnek bunun yerine Yerel incelemeyi tamamla seçeneğini sunar ve hiçbir şeyin gönderilmediğini veya saklanmadığını açıkça belirtir.

Core; birincil mavi #0071bc, hata kırmızısı #e31c3d, başarı yeşili #12890e ve kenarlık grisi #d9d9d9 renklerini birbirinden ayırır. Kaydedilen tercih yalnızca renkle değil, metinle de belirtilir. Odak göstergesinde temanın açık ve koyu odak referansları kullanılır; Düzenle seçeneğini sade bir denetim olarak biçimlendirirken bu göstergeyi kaldırmayın. Son durum klavyeyle erişilebilir olmalı ve inceleme satırlarını silmemelidir.

Destekleyici belirtimi okuyun

## CMS tasarım sistemi Güvenli biçimde yükleyin ve genişletin

### Eksiksiz bir CSS yolu ve gerçek bileşen yolu

Sabitlenmiş paketi yükleyin ve paket dışa aktarımları üzerinden css/index.css ile css/core-theme.css dosyalarını içe aktarın. React kullananlar Review bileşenini paketin kökünden; Preact kullananlar ise /preact giriş noktasından içe aktarır. Örnek, Sass derlemesi gerektirmez. Statik CSS kopyalıyorsanız, göreli yazı tipi ve görsel kaynak yollarını koruyun ya da bu örnekte yapıldığı gibi desteklenen bir yedek seçeneği açıkça belirleyin.

CMS ad alanında düzenler ds-l-, bileşenler ds-c- ve yardımcı sınıflar ds-u- önekleriyle ayrılır. Uygulama sınıfları, belgelenmemiş resmî bileşenlermiş gibi gösterilmemelidir. Önizlemedeki okuma alanı ve satır içi düzenleyici yerel bileşimlerdir; inceleme satırı ve düğmeler dağıtılan stilleri kullanır.

1. Eşleşen Core bileşenini ve tema CSS’sini yükleyin, ardından iki inceleme satırını oluşturun.

2. Her düzenleme eylemini denetlenen bir düzenleyiciye bağlayın; kaydetme ve iptalden sonra odağı geri getirin.

3. Masaüstü ve mobil genişliklerde değiştirilen değerleri, atılan taslakları ve yerel tamamlamayı test edin.

Destekleyici belirtimi okuyun

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

### Birbirinden bağımsız iki inceleme satırı

Gerçek 18.1.0 React özellikleri; bağlantılı düzenleme rotalarını kullanan uygulamalar uygular.

```
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}
```

Kod referansı

- Review varsayılan olarak h3 kullanır.

- editContent varsayılan düzenleme bağlantısının yerine geçer; bu bağlantının gösterilmesi için editHref gereklidir.

### Yerel CSS inceleme yapısı

Uygulamanın etkileşimleri yönettiği durumlarda kullanışlı bir manuel HTML entegrasyonu.

```
<div class="ds-c-review">
  <div class="ds-c-review__content">
    <h3 class="ds-c-review__heading">Notice format</h3>
    <p>Large print</p>
  </div>
  <a href="/preferences/notice-format" aria-label="Edit notice format">Edit</a>
</div>
```

Kod referansı

### 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"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Notice preferences — CMS Core specimen</title><link rel="stylesheet" href="vendor/cms-18.1.0/index.css"><link rel="stylesheet" href="vendor/cms-18.1.0/core-theme.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{margin:0;border-top:8px solid #0071bc}.shell{max-width:48rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:16px 0 24px}h2{font-size:24px;margin:32px 0 16px}.intro{margin-bottom:32px}.ds-c-review__content p{margin:8px 0}.edit{align-self:flex-start;min-width:48px;border:0;background:none;color:#0071bc;text-decoration:underline;font-size:16px;padding:4px;cursor:pointer}.editor{margin:24px 0;padding:24px;background:#e6f1f8;border-left:4px solid #0071bc}fieldset{padding:0;border:0;margin:0}legend{font-size:20px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;margin:16px 0}.choice input{width:20px;height:20px;accent-color:#0071bc}.actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}footer{margin-top:40px;padding-top:24px;border-top:1px solid #d9d9d9}#status{margin-top:24px;font-weight:bold}button:focus-visible,input:focus-visible{outline:3px solid #bd13b8;outline-offset:3px}[hidden]{display:none!important}@media(max-width:543px){.editor{padding:16px}.actions{flex-direction:column;align-items:flex-start}}</style></head><body><main class="shell"><p>CMS Core component example</p><h1>Review your notice preferences</h1><p class="intro">Check these fictional preferences before completing the local review. This example does not collect health information or contact details.</p><section aria-labelledby="preferences"><h2 id="preferences">Notice preferences</h2><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Notice format</h3><p id="format-value">Standard print</p></div><button class="edit" data-field="format" aria-label="Edit notice format">Edit</button></div><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Preferred language</h3><p id="language-value">English</p></div><button class="edit" data-field="language" aria-label="Edit preferred language">Edit</button></div></section><form class="editor" id="editor" hidden><fieldset><legend id="legend"></legend><div id="choices"></div></fieldset><div class="actions"><button class="ds-c-button ds-c-button--solid" type="submit">Save preference</button><button class="ds-c-button" id="cancel" type="button">Cancel</button></div></form><div class="actions"><button class="ds-c-button ds-c-button--solid" id="complete">Complete local review</button><button class="ds-c-button" id="reset">Reset example</button></div><p id="status" role="status"></p><footer>Native CMS Core 18.1.0 CSS · Arial fallback<br>Changes exist only on this page. Nothing is submitted or saved after you leave.</footer></main><script>const values={format:'Standard print',language:'English'},options={format:['Standard print','Large print','Electronic text'],language:['English','Spanish']},labels={format:'Notice format',language:'Preferred language'};let field,opener;const editor=document.querySelector('#editor'),status=document.querySelector('#status');function close(){editor.hidden=true;opener?.focus()}document.querySelectorAll('.edit').forEach(button=>button.addEventListener('click',()=>{field=button.dataset.field;opener=button;document.querySelector('#legend').textContent='Edit '+labels[field].toLowerCase();document.querySelector('#choices').replaceChildren(...options[field].map((text,i)=>{const label=document.createElement('label');label.className='choice';const input=document.createElement('input');input.type='radio';input.name='preference';input.value=text;input.checked=text===values[field];label.append(input,document.createTextNode(text));return label}));editor.hidden=false;editor.querySelector('input:checked').focus();status.textContent=''}));editor.addEventListener('submit',event=>{event.preventDefault();values[field]=editor.querySelector('input:checked').value;document.querySelector('#'+field+'-value').textContent=values[field];status.textContent=labels[field]+' updated to '+values[field]+'.';close()});document.querySelector('#cancel').addEventListener('click',close);document.querySelector('#complete').addEventListener('click',()=>{if(!editor.hidden){status.textContent='Save or cancel the open edit before completing the review.';editor.querySelector('input:checked').focus();return}status.textContent='Local review complete. No data was submitted.'});document.querySelector('#reset').addEventListener('click',()=>{values.format='Standard print';values.language='English';Object.entries(values).forEach(([key,value])=>document.querySelector('#'+key+'-value').textContent=value);editor.hidden=true;status.textContent='Example reset.'});</script></body></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.

## CMS tasarım sistemi Yapay Zekâ Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Paket dışa aktarımları ve Review özellikleri, yayımlanmış 18.1.0 meta verileri/tür tanımlarında doğrulanmıştır. Entegrasyon için React örneği sağlanır; bağımsız önizleme yerel JavaScript uygulama koduyla yerel CSS çalıştırır. Kaynaklardaki eksiksiz çalışan örnek ZIP dosyası, önizleme için gereken tam bağımlılıkları ve belgeyi de içerir. Dosyaları çıkarın, o dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/cms.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
// npm install @cmsgov/design-system@18.1.0
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}
```

### Projeniz İçin Bir İstem

```
CMS Core 18.1.0 inceleme ekranı oluşturun. index.css ile core-theme.css dosyalarını birlikte yükleyin. Birbirinden bağımsız düzenlenebilir her yanıt için heading, children, editHref ve editAriaLabel özellikleriyle Review kullanın; bölüm düzeyinde düzenleme, uygulamada ayrı bir bileşimdir. Taslaklar düzenlenirken soru sırasını ve görünür kaydedilmiş değerleri koruyun. Kaydetme/iptal sonrasında odağı geri getirin ve gerçekleşen güncellemeleri duyurun. #262626 temel metin rengi, 4px’lik yarım adımla 8px aralayıcılar, 32px genel grid boşluğu ve 16px form boşluğu dâhil Core belirteçlerini kullanın. Alt tema logolarını karıştırmayın veya yerel incelemenin başvuru gönderdiğini ima etmeyin.
```

## CMS tasarım sistemi Kaynaklar ve Kapsam

Core tema teknik başvurusu. Kurgusal tercih değerleri ve yalnızca yerel değişiklikler kullanılır; sağlık hizmetlerine uygunluk konusunda tavsiye verilmez, CMS ile bağlantı kurulmaz ve form gönderildiği belirtilmez.

- CMS Design System Resmî tanıtım, temeller ve bileşen kataloğu.

- Geliştirici kılavuzu Resmî entegrasyon seçenekleri ve paket kılavuzu.

- Form incelemesi Form bilgilerinin incelenmesine yönelik örüntü.

- Ç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.

## CMS tasarım sistemi İlgili Kaynaklar

### 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.

### Designsystemet

Designsystemet’ın gerçek tema rollerini, boyut modlarını ve yerel alan davranışını; karakter geri bildirimi ve korunan sunum durumuyla eksiksiz bir görev özeti düzenleyicisi aracılığıyla keşfedin.


- [Uygulama başvurusu](https://design.cms.gov/components/review/)
- [Kaynak](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css)
- [Kaynak](https://design.cms.gov/foundation/layout-grid/responsive-design/)
- [Destekleyici belirtimi okuyun](https://design.cms.gov/getting-started/for-developers/)
- [Destekleyici belirtimi okuyun](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css)
- [Destekleyici belirtimi okuyun](https://design.cms.gov/foundation/spacing/)
- [Destekleyici belirtimi okuyun](https://design.cms.gov/foundation/layout-grid/responsive-design/)
- [Kod referansı](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/react-components/types/Review/Review.d.ts)
- [Destekleyici belirtimi okuyun](https://design.cms.gov/components/review/)
- [Destekleyici belirtimi okuyun](https://design.cms.gov/patterns/Forms/form-review/)
- [Kod referansı](https://design.cms.gov/components/review/)
- [CMS Design System Resmî tanıtım, temeller ve bileşen kataloğu.](https://design.cms.gov/)
- [Geliştirici kılavuzu Resmî entegrasyon seçenekleri ve paket kılavuzu.](https://design.cms.gov/getting-started/for-developers/)
- [Form incelemesi Form bilgilerinin incelenmesine yönelik örüntü.](https://design.cms.gov/patterns/Forms/form-review/)