# NHS tasarım sistemi

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

Bir yöntem seçin, isteğe bağlı yardımı inceleyin, yanıtsız bir soruyu düzeltin ve tercihinizi değiştirin.

## NHS tasarım sistemi Tasarım Başvurusu

NHS.UK frontend 10.6.1 ve NHS dijital hizmet kılavuzu. Önizlemede Frutiger lisanslı yazı tipi veya NHS logosu yerine Arial kullanan resmî yerel CSS/JS kullanılır. Duyarlı değerler seçilen pakete göre kontrol edilmiştir; klinik içerik sağlanmaz.

### Tipografi ve kimlik

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Font stack | Frutiger W01, Arial, sans-serif | Frutiger için ilgili lisans gerekir; bu çalışma Arial’ı tercih eder. |
| nhsuk-body | 16px small / 19px large | Varsayılan okuma metni. |
| nhsuk-body-l | 26px desktop | Her giriş cümlesi yerine giriş paragrafını öne çıkarın. |
| nhsuk-body-s | 14px small / 16px large | İkincil bilgileri ölçülü kullanın. |
| nhsuk-heading-l | Transactional h1 | Ardından gelen h2 için heading-m kullanın. |
### Anlamsal renk değişkenleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $nhsuk-text-colour | #212b32 | Gövde içeriği |
| $nhsuk-secondary-text-colour | #4c6272 | İpuçları |
| $nhsuk-link-colour | #005eb8 | Bağlantı hedefleri |
| $nhsuk-focus-colour | #ffeb3b | Klavye odağı |
| $nhsuk-border-colour | #d8dde0 | Yapısal sınırlar |
| $nhsuk-input-border-colour | #4c6272 | Giriş sınırları |
| $nhsuk-error-colour | #d5281b | Doğrulama bildirimi |
| $nhsuk-button-colour | #007f3b | Birincil işlem |
### Duyarlı boşluklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| nhsuk-u-margin-bottom-1 | 4px → 4px | Küçük ekran → 768px üzeri; yerel bir kopya yerine sınıfı kullanın. |
| nhsuk-u-margin-bottom-2 | 8px → 8px | Küçük ekran → 768px üzeri; yerel bir kopya yerine sınıfı kullanın. |
| nhsuk-u-margin-bottom-3 | 8px → 16px | Küçük ekran → 768px üzeri; yerel bir kopya yerine sınıfı kullanın. |
| nhsuk-u-margin-bottom-4 | 16px → 24px | Küçük ekran → 768px üzeri; yerel bir kopya yerine sınıfı kullanın. |
| nhsuk-u-margin-bottom-5 | 24px → 32px | Küçük ekran → 768px üzeri; yerel bir kopya yerine sınıfı kullanın. |
| nhsuk-u-margin-bottom-6 | 32px → 40px | Küçük ekran → 768px üzeri; yerel bir kopya yerine sınıfı kullanın. |
| nhsuk-u-margin-bottom-7 | 40px → 48px | Küçük ekran → 768px üzeri; yerel bir kopya yerine sınıfı kullanın. |
| nhsuk-u-margin-bottom-8 | 48px → 56px | Küçük ekran → 768px üzeri; yerel bir kopya yerine sınıfı kullanın. |
| nhsuk-u-margin-bottom-9 | 56px → 64px | Küçük ekran → 768px üzeri; yerel bir kopya yerine sınıfı kullanın. |
### Sayfa bileşimi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| nhsuk-width-container | 960px maximum | Sabit genişlikli dış kapsayıcı. |
| nhsuk-main-wrapper--s | Smaller vertical wrapper | İşlemsel hizmetler için önerilir. |
| nhsuk-grid-column-two-thirds | Desktop column; mobile stack | Izgara genişlikleri 769px değerinden itibaren geçerlidir. |
| Breakpoints | 320 / 641 / 769 / 990px | Mobil, tablet, masaüstü, büyük masaüstü. |
| nhsuk-u-reading-width | Readable content measure | Çevresindeki kapsayıcı geniş olduğunda kullanın. |
## NHS tasarım sistemi Eksiksiz 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ı.

## NHS tasarım sistemi NHS Bağlamı ve Yazı Tipleri

### Yanlış kimlik izlenimi vermeyen bir sağlık arayüzü

> NHS.UK frontend, görsel ve etkileşim temelini sağlar; ancak randevu planlamaz veya bir kliniğin hangi katılım yöntemlerini desteklediğine karar vermez. Bu çalışma kurgu bir randevuyu gösterir ve ziyaretçinin tercih yapmasına olanak tanır. Sonuç, yerel bir gözden geçirmedir; rezervasyon değildir.

Frutiger, lisans koşullarına tabi bir NHS marka varlığıdır. Bu bağımsız kaynak, belgelenmiş yedek yazı tipi olan Arial’ı kullanır ve NHS logosunu içermez. Resmî CSS olduğu gibi korunur; açık bir yerel yazı tipi geçersiz kılması Frutiger isteklerini önler.

Destekleyici belirtimi okuyun

## NHS tasarım sistemi İşlem Metinleri

### Hiyerarşiyi sorunun belirlemesini sağlayın

Sayfadaki soru için nhsuk-heading-l, alt bölüm için nhsuk-heading-m kullanın. Bu, yönlendirmenin heading-xl ile başladığı uzun bir editoryal sayfadan farklıdır. Radyo alan grubu, grup anlamını kaybetmeden başlık boyutunda bir açıklama kullanabilir.

Düzenli paragraf sınıfları gövde metnini, giriş metnini ve küçük destekleyici metni birbirinden ayırır. Sayfanın başında bir kez kullanılan 26px boyutundaki giriş metni yararlı olabilir; randevu talimatları ise normal gövde metni olarak kalmalıdır. Önizlemede, tarihlerin ve konum adlarının alt satıra geçmesine yetecek genişlik korunur.

Destekleyici belirtimi okuyun

## NHS tasarım sistemi Boşluk ve Kapsayıcı

### NHS boşluk ölçeği, GOV.UK boşluk ölçeğiyle aynı değildir

NHS duyarlı birimleri farklı bir sıra izler ve 768px üzerinde değişir. Örneğin, 6. birim 32px'ten 40px'e çıkar. Yardımcı adları benzer görünüyor diye GOV.UK'in 6. birim değerini NHS için kullanmayın.

Demoda 960px kapsayıcı ve üçte ikilik bir okuma sütunu kullanılır. Yerel ızgara davranışı, masaüstü görünümünün altında tek sütuna geçer. Düzen değişiklikleri kütüphane tarafından yönetilirken küçük, bağımsız kimlik şeridi uygulama stilidir.

```
.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}
```

Kod referansı

Destekleyici belirtimi okuyun

### Duyarlı tasarım sınırları

Belgelerde 641px tablet, 769px ise masaüstü olarak belirtilir. Izgara sütun genişlikleri masaüstü boyutunda devreye girer; bu, tüm tipografi kurallarının aynı eşik değerini beklediği anlamına gelmez. Tüm özellikler için tek bir genel kesme noktası tanımlamak yerine yerel sınıfları kullanın.

Destekleyici belirtimi okuyun

## NHS tasarım sistemi Gruplandırılmış Katılım Seçenekleri

### Tek alan grubu, tek yanıt

Örnekte görünür bir açıklamaya sahip nhsuk-fieldset ve radyo girişlerinde ortak bir name özniteliği kullanılır. Her girişin kendine ait bir id ve label'ı vardır. İpucu, aria-describedby aracılığıyla grupla ilişkilendirilir. Bu ilişkiler, tarayıcının tek ve karşılıklı olarak birbirini dışlayan bir seçenek sunmasını sağlar.

Radyo öğesi yapısında giriş ve etiket nhsuk-radios__item içinde yer alır. Standart radyo düğmeleri ana soru için uygundur; küçük varyant ise daha yoğun filtre bağlamları için tasarlanmıştır. Kurgusal katılım seçenekleri, ok tuşlarıyla gezinildiğinde de birbirini dışlayan seçenekler olarak kalır.

- Açıklama, kararı belirtir.

- Ortak katılım adı, seçim grubunu oluşturur.

- Her etiket farklı bir giriş ID'sini hedefler.

Destekleyici belirtimi okuyun

## NHS tasarım sistemi Temel Bilgileri Gizlemeden Yardım Edin

### Yerel details öğesini kullanın

Details örneğinde nhsuk-details__summary ve bir summary-text span'i, ardından da nhsuk-details__text yer alır. Öğe, tarayıcının yerel davranışıyla açılır. Randevu kimliğini ve bu sayfanın randevu oluşturmadığı bilgisini herkesin görmesi gerektiğinden, bu bilgileri açılır içeriğin dışında tutun.

10.6 sürümünde Nunjucks API, summary.text veya summary.html kullanır; eski summaryText seçeneği kullanımdan kaldırılmıştır. Makroları kullanıyorsanız yeni nesne yapısını tercih edin. HTML örneği, aynı yapıyı korurken şablon bağımlılığını önler.

Destekleyici belirtimi okuyun

## NHS tasarım sistemi Seçim Hataları ve Gözden Geçirme

### Önceden seçim yaptırmadan grubu doğrulayın

Başlangıçta hiçbir seçenek belirlenmez. Yanıt vermeden devam edildiğinde satır içi hata gösterilir ve grup bu hata mesajıyla ilişkilendirilir. Ardından önizleme odağı hataya taşır. Gözden geçirme ekranından dönüldüğünde seçim görünür kalır. Bunlar, yerel kontrollerin üzerine eklenen uygulama durumu kararlarıdır.

Gözden geçirme ekranında seçilen yöntem ve kurgusal randevunun kimliği yinelenir. Eylem metni Tercihi değiştir şeklindedir. Bir sağlık hizmetinin tercihi kabul ettiğini düşündüren onay mesajı gösterilmez; sağlık tavsiyesi veya hazırlık gerekliliği de uydurulmaz.

1. Bir katılım yöntemi seçmeden devam edin.

2. Telefonla seçeneğini belirleyip yerel gözden geçirme ekranını açın.

3. Tercihi Yüz yüze olarak değiştirin ve güncellenen gözden geçirme ekranını inceleyin.

Destekleyici belirtimi okuyun

## NHS tasarım sistemi Yerel Ön Uç Varlıkları

### Seçilen paketi ve modülü kullanın

Kurulum, 10.6.1 sürümündeki CSS paketini ve tarayıcı modülünü statik varlıklar dizinine kopyalar. Modül initAll öğesini dışa aktarır; bileşen işaretlemesi oluşturulduktan sonra bu öğeyi çağırın. Bağımsız örnek, aynı yerel dağıtımı ve sayfa düzeyinde bir Arial geçersiz kılmasını kullanır.

Stiller, bileşen kurallarını ve duyarlı tasarımın temel kurallarını içerir. Gözden geçirme panelini değiştiren küçük betik, ayrı bir uygulama kodudur. Üretim ortamındaki bir hizmet, kurgusal randevu kaydını güncel verilerle değiştirmeli ve gerçek bir tercih isteğini kendi arka ucu üzerinden işlemelidir.

Destekleyici belirtimi okuyun

## NHS tasarım sistemi Birleşimi Gözden Geçirme

### Sağlık hizmeti bağlamını kontrol edin

Ayırt edici kontrol noktaları şunlardır: ziyaretçi randevuyu tanıyabilmeli, katılım tercihinin henüz onaylanmadığını anlamalı ve bağlamı kaybetmeden seçtiği yöntemi değiştirebilmelidir. Genel bir başarı bildirimi bu ayrımı belirsizleştirir.

Radyo grubunu ve details özetini klavyeyle kullanın; ardından uzun bir klinik adı içeren dar görünümü inceleyin. Seçim yapılmadığında gösterilen hata, kullanıcıyı gruba yönlendirmelidir. Kütüphane yeniden kullanılabilir davranışlar sağlar; gerçek randevu kurallarından ve klinik bilgilerden ise kurum sorumludur.

Destekleyici belirtimi okuyun

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

### Katılım radyo grubu

Karşılıklı olarak birbirini dışlayan yerel girişlere ve NHS bileşen sınıflarına sahip, etiketlenmiş bir alan grubu.

```
<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>
```

Kod referansı

### İsteğe bağlı bağlamsal yardım

Yerel details öğesi, görevi gizlemeden ek bilgileri gösterir.

```
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
```

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>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</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.

## NHS tasarım sistemi Agent Kurulumu

### Uygulamaya Başlangıç Noktası

Kabuk komutlarını ve HTML öğesini ilgili dosyalara yerleştirin. Arial, bağımsız önizleme için açıkça tanımlanmış bir geçersiz kılmadır; NHS kurumları kendi yazı tipi lisanslarına ve marka gerekliliklerine uymalıdır. Kaynaklar'daki eksiksiz çalışan örnek ZIP dosyası, önizleme için gereken bağımlılıkları ve tam belgeyi de içerir. Dosyayı çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/nhs.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
npm install nhsuk-frontend@10.6.1
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/

<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
  import { initAll } from '/assets/nhsuk-frontend.min.js';
  initAll();
</script>
```

### Projeniz İçin Bir İstem

```
NHS.UK Frontend 10.6.1 kullanarak bağımsız bir randevu tercihi sorusu oluşturun. Birbirini dışlayan katılım yöntemleri için alan grubu ve açıklama, ilişkili radyo ipuçları ve isteğe bağlı yardım için yerel Details kullanın. Soruyu ve temel talimatları görünür tutun. Yanıtlanmamış bir gözden geçirme ekranında bağlantılı bir hata özeti ve satır içi hata gösterin; yerel gözden geçirme ekranından dönüldüğünde seçilen yöntemi koruyun. Eşleşen CSS öğesini ve initAll modülünü yükleyin; açıkça belgelenmiş Arial deneme geçersiz kılmasını kullanın. Randevu arama, gerçek randevu değişikliği, klinik tavsiye veya NHS kimliği iddiası eklemeyin.
```

## NHS tasarım sistemi Kaynaklar ve Kapsam

NHS.UK frontend 10.6.1 kullanılarak hazırlanmış bağımsız randevu tercihi çalışması. NHS logosu, lisanslı Frutiger yazı tipi, gerçek randevu işlemi veya klinik talimat içermez ve NHS tarafından onaylandığı izlenimini vermez.

- Tipografi Yazı tipi uygunluğu ve işlem metinlerinin hiyerarşisi.

- Renk Adlandırılmış anlamsal değişkenler.

- Boşluklar Duyarlı sınıf ölçeği.

- Düzen Kapsayıcı ve masaüstü ızgarası.

- Radyo düğmeleri Grup yapısı ve durumlar.

- Details Açılır içeriğin yapısı ve güncel makro API.

- Frontend kaynak kodu Resmî uygulama ve dağıtım.

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

## NHS tasarım sistemi İlgili Kaynaklar

### NL tasarım sistemi

Gerçek katkıcı bileşenleri ve açıkça belirtilmiş bir temayı kullanarak bir kamu hizmeti arayüzü oluşturun. Bu örnek, belirteç eşlemesini, veri listesi yapısını ve aynı düzenleme iş akışını kullanan iki özgün temayı göstermek için Utrecht CSS kullanıyor.

### NSW tasarım sistemi

Bağımsız bir yerel okuma listesi içeren eksiksiz bir atölye kılavuzunda NSW tasarım belirteçlerini, Public Sans tipografisini ve klavyeyle erişilebilen yerel sekmeleri keşfedin.

### ONS tasarım sistemi

Birbiriyle çelişemeyen bir anket yanıtı oluşturun: yerel ONS onay kutuları, birbirini dışlayan yanıtlar, kesin tür ve renk referansları ve eksiksiz bir yerel inceleme akışı.


- [Uygulama başvurusu](https://service-manual.nhs.uk/design-system/components/radios)
- [Kaynak](https://service-manual.nhs.uk/design-system/styles/typography)
- [Kaynak](https://service-manual.nhs.uk/design-system/styles/colour)
- [Kaynak](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Kaynak](https://service-manual.nhs.uk/design-system/styles/layout)
- [Destekleyici belirtimi okuyun](https://service-manual.nhs.uk/design-system/styles/typography)
- [Kod referansı](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Destekleyici belirtimi okuyun](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Destekleyici belirtimi okuyun](https://service-manual.nhs.uk/design-system/styles/layout)
- [Destekleyici belirtimi okuyun](https://service-manual.nhs.uk/design-system/components/radios)
- [Destekleyici belirtimi okuyun](https://service-manual.nhs.uk/design-system/components/details)
- [Destekleyici belirtimi okuyun](https://github.com/nhsuk/nhsuk-frontend)
- [Kod referansı](https://service-manual.nhs.uk/design-system/components/radios)
- [Kod referansı](https://service-manual.nhs.uk/design-system/components/details)
- [Tipografi Yazı tipi uygunluğu ve işlem metinlerinin hiyerarşisi.](https://service-manual.nhs.uk/design-system/styles/typography)
- [Renk Adlandırılmış anlamsal değişkenler.](https://service-manual.nhs.uk/design-system/styles/colour)
- [Boşluklar Duyarlı sınıf ölçeği.](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Düzen Kapsayıcı ve masaüstü ızgarası.](https://service-manual.nhs.uk/design-system/styles/layout)
- [Radyo düğmeleri Grup yapısı ve durumlar.](https://service-manual.nhs.uk/design-system/components/radios)
- [Details Açılır içeriğin yapısı ve güncel makro API.](https://service-manual.nhs.uk/design-system/components/details)
- [Frontend kaynak kodu Resmî uygulama ve dağıtım.](https://github.com/nhsuk/nhsuk-frontend)