# Pega Bolt Tasarım Sistemi

## Pega Bolt Tasarım Sistemi Arayüz Önizlemesi

Tek seferde bir sorunun açık olduğu soru listesini, illüstrasyonlu editoryal bir özetin yanında deneyin.

## Pega Bolt Tasarım Sistemi Tasarım Referansı

Bolt Twig Pattern Lab herkese açık referansı. rem değerleri sayfanın kök boyutuyla birlikte akışkandır; tüm rem değerlerini sabit 16 px katları olarak değerlendirmeyin. Önizleme düzeni ve illüstrasyon özgündür.

### Marka rengi rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --bolt-color-navy | #001f5f | Birincil marka alanı. |
| --bolt-color-navy-dark | #081c45 | Daha koyu arka plan. |
| --bolt-color-navy-xlight | #d7e2f2 | Açık marka yüzeyi. |
| --bolt-color-teal | #10a5ac | İllüstrasyon vurgusu; gövde metni olarak kullanıldığında otomatik olarak erişilebilir değildir. |
| --bolt-color-teal-xdark | #005154 | Daha koyu turkuaz seçeneği. |
| --bolt-color-orange | #f76923 | Sıcak vurgu rengi. |
| --bolt-color-yellow | #ffc836 | Vurgu rengi. |
### İki eksenli boşluk

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --bolt-spacing-x-xsmall | 0.3875rem | x ekseni boşlukları için yatay, y ekseni boşlukları için dikey ölçeği kullanın. |
| --bolt-spacing-x-small | 0.775rem | x ekseni boşlukları için yatay, y ekseni boşlukları için dikey ölçeği kullanın. |
| --bolt-spacing-x-medium | 1.55rem | x ekseni boşlukları için yatay, y ekseni boşlukları için dikey ölçeği kullanın. |
| --bolt-spacing-x-large | 3.1rem | x ekseni boşlukları için yatay, y ekseni boşlukları için dikey ölçeği kullanın. |
| --bolt-spacing-y-xsmall | 0.3375rem | x ekseni boşlukları için yatay, y ekseni boşlukları için dikey ölçeği kullanın. |
| --bolt-spacing-y-small | 0.675rem | x ekseni boşlukları için yatay, y ekseni boşlukları için dikey ölçeği kullanın. |
| --bolt-spacing-y-medium | 1.35rem | x ekseni boşlukları için yatay, y ekseni boşlukları için dikey ölçeği kullanın. |
| --bolt-spacing-y-large | 2.7rem | x ekseni boşlukları için yatay, y ekseni boşlukları için dikey ölçeği kullanın. |
### Tipografi temeli

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --bolt-type-font-size-display | 3.75rem | Akışkan kök boyutuna göredir; anlamsal başlık etiketlerini bağımsız olarak seçin. |
| --bolt-type-font-size-xxlarge | 2.35rem | Akışkan kök boyutuna göredir; anlamsal başlık etiketlerini bağımsız olarak seçin. |
| --bolt-type-font-size-large | 1.4rem | Akışkan kök boyutuna göredir; anlamsal başlık etiketlerini bağımsız olarak seçin. |
| --bolt-type-font-size-regular | 1rem | Akışkan kök boyutuna göredir; anlamsal başlık etiketlerini bağımsız olarak seçin. |
| --bolt-type-font-size-small | 0.9rem | Akışkan kök boyutuna göredir; anlamsal başlık etiketlerini bağımsız olarak seçin. |
| Font family | Open Sans | Yayımlanmış tipografi temelindeki gövde ve başlık yazı tipi aileleri. |
| Weights | 300 / 400 / 600 / 700 / 800 | Hafiften ekstra kalına; eşleşen yazı tipi dosyalarını yükleyin. |
### Sayfa yoğunluğu

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Attribute | data-bolt-info-density | Yalnızca html öğesinde ayarlayın. |
| comfortable | Larger font and spacing | Okumaya öncelik veren yoğunluk. |
| regular | Default | Öznitelik belirtilmeyebilir. |
| compact | Smaller font and spacing | Yerel kart değiştiricisi olarak uygulamayın. |
### Akordeon bileşimi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| single | false by default | true, akordeonda aynı anda yalnızca bir öğenin açık olmasını sağlar. |
| spacing | medium | Şemada none, xsmall, small, medium ve large seçenekleri listelenir. |
| icon_valign | center | top, simgeyi çok satırlı tetikleyicilerle hizalar. |
| no_separator | false | Soru sınırlarının belirgin olması gerekiyorsa ayırıcıları koruyun. |
| box_shadow | false | İsteğe bağlı kapsayıcı gölge. |
| item.open | false | Başlangıçta bir öğeyi genişletin. |
| item.inactive | false | Geçiş simgesi olmayan, daraltılmış öğe. |
| item.trigger | Content | Varsayılan etiketi anlamlı bir soruyla değiştirin. |
## Pega Bolt Tasarım Sistemi Eksiksiz Kılavuzu

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

## Pega Bolt Tasarım Sistemi: Bolt uygulamasını seçin

### Twig ve React farklı sözleşmelere sahiptir

> Bu kılavuz, herkese açık Bolt Twig / Pattern Lab uygulamasını ele alır. Mevcut Bolt ana sayfasında ayrıca uygulamalar ve portallar için BoltDS React sunulur; bu iki uygulamanın belgeleri ve sürümlemeleri ayrıdır. Önizleme bağımsız bir HTML yorumudur, Bolt çalışma zamanı değildir.

Bu örnek, görünür bir özet ve isteğe bağlı sorular içeren bir atölye kaynağıdır. İçerik odaklı Twig uygulaması buna uygundur: önce editoryal hiyerarşi gelir, akordeon ise ek materyali gerektiğinde erişilebilir kılar. BoltDS React ile oluşturulmuş bir uygulamada Twig ad alanı yollarını kopyalamak yerine ilgili belgeler kullanılmalıdır.

Destekleyici belirtimi okuyun

## Pega Bolt Tasarım Sistemi: Lacivert yapı, sınırlı parlak vurgular

### Markalı bir okuma yüzeyi

Yayımlanan palete lacivert #001f5f, camgöbeği #10a5ac ve turuncu #f76923 dahildir. Örnekte güçlü bir editoryal başlık için lacivert, görsel vurgular için camgöbeği ve turuncu kullanılır. Bu tonlar temel renk değerleridir; her renk birleşiminin küçük metinlerde uygun olduğunu göstermez.

Kaynak bilgileri beyaz ve açık lacivert yüzeylerde sunulur. Dekoratif dallanan diyagram, bir hizmet yolculuğunu basitleştirme atölyesini anlatır; özgün bir çalışmadır, Pega logosu veya resmî bir diyagram değildir.

Destekleyici belirtimi okuyun

## Pega Bolt Tasarım Sistemi: Akışkan tipografi ve okunabilir metin genişlikleri

### Rem değerleri sabit piksel garantisi değildir

Bolt, normal boyutu 1rem, büyük boyutu 1.4rem, xxlarge boyutu 2.35rem ve display boyutunu 3.75rem olarak tanımlar. Kök boyut görünüm alanına ve piksel yoğunluğuna göre ölçeklenir; bu nedenle tablonun tamamını sabit 16 px tabanına göre dönüştürmek amaçlanan davranışı bozar.

Temel tipografi, gövde ve başlık metinlerinde Open Sans kullanır. Bağımsız önizlemede yazı tipi dosyaları pakete dahil olmadığından yerel sistem yazı tipi yedeği kullanılır. Piksel düzeyinde tipografik eşitlik iddiasında bulunmadan belirgin bir başlık, kısa bir üst etiket ve rahat okunur paragraflar sunar.

Destekleyici belirtimi okuyun

## Pega Bolt Tasarım Sistemi: Yatay ve dikey ritim farklıdır

### Genel bir sekiz noktalı ölçekle değiştirmeyin

Orta yatay boşluk 1.55rem, orta dikey boşluk ise 1.35rem'dir. Büyük boşluklarda da aynı ayrım 3.1rem ve 2.7rem olarak korunur. Bitişik öğeler arasında x ölçeğini, alt alta sıralanmış bölümler arasında y ölçeğini kullanın.

Önizlemede geniş ekranda giriş ve soru listesi ayrı sütunlarda gösterilir; ardından yerel 700 px kırılma noktasında alt alta sıralanır. Bu kırılma noktası Bolt belirteci değil, uygulamaya özgü bir tercihtir. Uzun soru etiketleri, metin küçülmeden simgenin yanında alt satıra geçer.

Destekleyici belirtimi okuyun

## Pega Bolt Tasarım Sistemi: Soru listesini Twig ile oluşturun

### Öğeler veri özelliği değil, yakalanan içeriktir

Her accordion-item.twig çağrısında tetikleyici ve içerik sağlanır. Twig set bloğu, oluşturulan öğeleri yakalar; üst bileşene bu içerik content üzerinden iletilir. Yukarıdaki eksiksiz örnek ilk soruyu açık gösterir ve single: true kullanır.

spacing öğelerin iç boşluklarını, icon_valign ise simgenin hizalamasını denetler. Soruların sınırlarının belirgin olması gerekiyorsa ayırıcıları koruyun. inactive bayrağı, devre dışı bırakılmış bir form denetimi değildir: içeriği daraltır ve simgeyi gizler.

- Tarihleri, ön koşulları ve kullanılabilirlik bilgilerini daraltılmış yanıtların dışında tutun.

- Tetikleyicide somut bir soru sorun.

- Bir yanıtın içine başka bir akordeon yerleştirmeyin.

Destekleyici belirtimi okuyun

## Pega Bolt Tasarım Sistemi: Okuma konumunu kaybetmeden genişletme

### Aynı anda tek yanıt

HTML yorumunda gerçek düğmeler, aria-expanded, aria-controls ve gizli yanıt panelleri kullanılır. Kapalı bir soruya tıklandığında soru açılır, önceki yanıt kapanır; açık soruya tıklandığında ise soru daraltılır. Odak, tetikleyici düğmede kalır.

Bu yaklaşım, Bolt JavaScript'ten bağımsız kalırken seçilen tek öğenin açık olma davranışını yansıtır. Önizleme, Bolt derin bağlantılarını uygulamaz ve yerel bileşen çalışma zamanını çalıştırdığı iddiasında bulunmaz. Yerel Bolt'ta tekli mod etkin olduğunda derin bağlantıyla açılan öğe, başlangıçta açık olarak belirlenmiş öğeye öncelik kazanır.

Destekleyici belirtimi okuyun

## Pega Bolt Tasarım Sistemi: Yoğunluk tüm sayfanın ayarıdır

### Bileşen özelliği değil, kök düzeyinde bir ayar

Bolt, html öğesindeki data-bolt-info-density ile comfortable, regular ve compact değerlerini tanır. Varsayılan değer regular'dır. Comfortable yazı boyutlarını ve boşlukları artırır; compact ise ikisini de azaltır.

Kök özniteliğini akordeona uygulayıp bileşen başına desteklenen bir yoğunluk değişikliği elde edeceğinizi beklemeyin. Bu okuma sayfasında önizleme, yerel yoğunluk motorunu taklit etmek yerine sabit ve rahat bir editoryal düzen kullanır.

Destekleyici belirtimi okuyun

## Pega Bolt Tasarım Sistemi: Gerçek bileşeni bağlamında kullanın

### Belgelenen ortamı kullanın

Yükleme komutu, bileşen ad alanlarını çözen ve gerekli varlıkları derleyen bir Bolt Twig uygulamasında anlamlıdır. Herkese açık depo, yarn setup ve yarn start komutlarıyla eksiksiz bir geliştirme ortamı sunar. Bu bir referans ortamıdır; iki satırlık bir üretim dağıtımı değildir.

1. Sunucu tarafında oluşturulan içerik uygulaması için Twig'i seçin ve sürümünü uygulamanızda doğrulayın.

2. Akordeon paketini yükleyin, mevcut Twig ad alanını Bolt uygulama yapılandırması üzerinden kaydedin ve derlenmiş proje varlıklarını ekleyin.

3. Eksiksiz soru örneğini oluşturun; ardından gerçek projede tekli genişletme davranışını, satıra kaydırılan tetikleyicileri ve klavye kullanımını doğrulayın.

Destekleyici belirtimi okuyun

## Pega Bolt Tasarım Sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Bolt Twig temellerinin ve tekli akordeon davranışının bağımsız HTML/CSS yorumu. Sistem yazı tipi yedeği kullanılır; Bolt çalışma zamanı içermez.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Service journey workshop</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#001f5f;font:16px/1.6 system-ui,sans-serif}header{background:#001f5f;color:white;padding:38px 5%;display:grid;grid-template-columns:1.6fr 1fr;gap:30px}small{letter-spacing:.13em;font-size:11px;text-transform:uppercase}h1{font-size:clamp(32px,4vw,48px);line-height:1.12;max-width:650px;margin:16px 0}header p{max-width:550px;color:#d7e2f2}svg{width:100%;max-width:310px;align-self:center;justify-self:center}main{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:32px 5%}h2{font-size:23px;line-height:1.25}aside p{font-size:14px}dl{font-size:14px}dt{font-weight:700;margin-top:18px}dd{margin:2px 0}section{background:white;border-top:3px solid #10a5ac}article{border-bottom:1px solid #d7e2f2}button{font:600 16px/1.5 system-ui;width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:22px 24px;border:0;background:white;color:#001f5f;cursor:pointer}button:hover{background:#f0f5fc}button:focus-visible{outline:3px solid #005154;outline-offset:-4px}.answer{padding:0 24px 24px;color:#303744;font-size:15px}.answer p{margin:0}footer{padding:0 5% 22px;color:#555;font-size:11px}@media(max-width:700px){header{grid-template-columns:1fr;padding:28px 6%}svg{display:none}main{grid-template-columns:1fr;padding:24px 6%;gap:16px}button{padding:20px}dl{display:flex;flex-wrap:wrap;gap:24px}dt{margin:0}}</style><header><div><small>Field notes · Live workshop</small><h1>Make your service journey simpler.</h1><p>A practical session for turning a complex request into a clear next step.</p></div><svg viewBox="0 0 300 200" aria-hidden="true"><path d="M30 100H115M115 100V40H230M115 100V160H230" fill="none" stroke="#86cac6" stroke-width="4"/><circle cx="30" cy="100" r="22" fill="#f76923"/><rect x="95" y="80" width="40" height="40" rx="5" fill="#10a5ac"/><rect x="210" y="20" width="70" height="40" rx="6" fill="#d7e2f2"/><rect x="210" y="140" width="70" height="40" rx="6" fill="#ffc836"/></svg></header><main><aside><small>Before you join</small><h2>One journey.<br>A clearer direction.</h2><p>Map a request, find a point of friction, and rewrite the next step together.</p><dl><div><dt>Format</dt><dd>Live, small-group exercise</dd></div><div><dt>Length</dt><dd>45 minutes</dd></div><div><dt>Example only</dt><dd>No registration is collected</dd></div></dl></aside><div><h2>Useful to know</h2><section aria-label="Workshop questions"><article><h3 style="margin:0"><button aria-expanded="true" aria-controls="a1" id="q1">What should I bring?<span aria-hidden="true">−</span></button></h3><div class="answer" id="a1"><p>Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a2" id="q2">Will there be a recording?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a2" hidden><p>This workshop is live only. The written exercise is included so you can revisit the method with your team.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a3" id="q3">Who is this session for?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a3" hidden><p>Content teams and developers working on service journeys. No prior experience with the workshop format is required.</p></div></article></section></div></main><footer>Independent Bolt Twig interpretation · verified palette and spacing references · system font fallback</footer><script>const qs=[...document.querySelectorAll('button')];qs.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';qs.forEach(x=>{let yes=x===b&&open;x.setAttribute('aria-expanded',yes);x.lastElementChild.textContent=yes?'−':'+';document.getElementById(x.getAttribute('aria-controls')).hidden=!yes})});</script></html>
```

Kod referansı

- Tekli açık soru listesi Bolt derin bağlantılarını uygulamaz. Yerel entegrasyon yolu Twig örneğidir; atölyeyle ilgili temel bilgiler daraltılmış yanıtların dışında tutulur.

### Tek yanıtı açık atölye soruları

Her soruyu öğe şablonuyla oluşturun, işaretlemelerini yakalayın ve üst akordeona iletin.

```
{% set questions %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'What should I bring?',
    content: '<p>Bring a laptop and one workflow you want to simplify.</p>',
    open: true
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Will there be a recording?',
    content: '<p>This workshop is live only. The written exercise is included.</p>'
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Who is this session for?',
    content: '<p>Content teams and developers working on service journeys.</p>'
  } only %}
{% endset %}
{% include '@bolt-components-accordion/accordion.twig' with {
  content: questions,
  single: true,
  spacing: 'medium',
  icon_valign: 'top'
} only %}
```

Kod referansı

- Bunu, yapılandırılmış bir Bolt Twig uygulamasında kullanın. Resmî bileşen, düz HTML kullanımı için bir giriş noktası sunmaz.

- single, aynı anda açılabilecek öğe sayısını birle sınırlar. Derin bağlantı, başlangıçta açık olarak belirlenen öğeye öncelik kazanır.

- Şemada en büyük boşluk seçeneği large olarak listelenmiştir; ancak bir belge örneğinde xlarge kullanılır. Bu örnek şemadaki seçeneklerle sınırlı kalır.

## Pega Bolt Tasarım Sistemi: Temsilci Kurulumu

### Uygulamaya Başlangıç Noktası

Paket komutu bileşeni ekler, tek başına çalışan bir web sitesi oluşturmaz. Projede kayıtlı @bolt-components-accordion Twig ad alanını ve derlenmiş Bolt varlıklarını kullanın. Depodaki geliştirme kurulumu ile uygulama entegrasyonu farklı yollardır; hiçbiri mevcut BoltDS React API değildir.

```
# In an existing Bolt Twig application with its asset pipeline configured:
npm install @bolt/components-accordion

# To inspect the complete official development environment instead:
git clone https://github.com/boltdesignsystem/bolt.git
cd bolt
yarn setup
yarn start
```

### Projeniz İçin Bir İstem

```
Doğrulanmış lacivert/camgöbeği paletini, akışkan tipografi hiyerarşisini ve farklı x/y boşluk ölçeklerini kullanarak bir Bolt Twig atölye kaynak sayfası oluşturun. Temel bilgileri görünür tutun. accordion-item.twig öğelerini accordion.twig içinde, single true ve medium boşlukla birleştirin. Twig yollarını React API'leri olarak kullanmayın.
```

## Pega Bolt Tasarım Sistemi: Kaynaklar ve kapsam

Bu kılavuz, herkese açık Bolt Twig / Pattern Lab uygulamasını ele alır. Mevcut Bolt ana sayfasında ayrıca uygulamalar ve portallar için BoltDS React sunulur; bu iki uygulamanın belgeleri ve sürümlemeleri ayrıdır. Önizleme bağımsız bir HTML yorumudur, Bolt çalışma zamanı değildir.

- Bolt uygulamaları React ve Twig giriş noktaları.

- Marka renk belirteçleri Pega paleti ve CSS değişkenleri.

- Boşluklar Birbirinden bağımsız x ve y ölçekleri.

- Tipografi Akışkan rem boyutları ve yazı tipi aileleri.

- Bilgi yoğunluğu Sayfa düzeyinde yoğunluk ayarı.

- Akordeon şeması Twig özellikleri, öğe şablonu ve etkileşim kısıtlamaları.

## Pega Bolt Tasarım Sistemi İlgili Kaynaklar

### Porsche tasarım sistemi

Akışkan aralıkları, CSS renk şemalarını, Porsche Next tipografisini ve iki seçenekli bir yapılandırıcıyı kullanarak Porsche Design System v4’ü keşfedin. Bu örnekte gerçek belirteç ifadeleri ve güncel segmented-control olaylarını kullanan eksiksiz bir Vite girişi bulunur.

### Red Hat PatternFly

Bir operasyon çalışma alanı için PatternFly kullanın: anlamsal belirteç referansları, seçilebilir hizmet kartları, üç durumlu toplu seçim, kapsam incelemesi ve eksiksiz yerel React kodu.

### REI Cedar

Yerel Vue kutucukları, gerçek belirteç değerleri, eksiksiz klavye gezinmesi ve duyarlı bir ürün düzeniyle somut bir Cedar sipariş karşılama seçicisi oluşturun.


- [Uygulama başvurusu](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [Kaynak](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html)
- [Kaynak](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html)
- [Kaynak](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html)
- [Kaynak](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html)
- [Kaynak](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [Destekleyici belirtimi okuyun](https://boltdesignsystem.com/)
- [Destekleyici belirtimi okuyun](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html)
- [Destekleyici belirtimi okuyun](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html)
- [Destekleyici belirtimi okuyun](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html)
- [Destekleyici belirtimi okuyun](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [Destekleyici belirtimi okuyun](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html)
- [Kod referansı](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [Bolt uygulamaları React ve Twig giriş noktaları.](https://boltdesignsystem.com/)
- [Marka renk belirteçleri Pega paleti ve CSS değişkenleri.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html)
- [Boşluklar Birbirinden bağımsız x ve y ölçekleri.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html)
- [Tipografi Akışkan rem boyutları ve yazı tipi aileleri.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html)
- [Bilgi yoğunluğu Sayfa düzeyinde yoğunluk ayarı.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html)
- [Akordeon şeması Twig özellikleri, öğe şablonu ve etkileşim kısıtlamaları.](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)