<div class="ch-bb--1 ch-bc--grey-3">
  <button class="ch-tab">Gallery</button>
  <button class="ch-tab ch-tab--selected">Customer Appraisal</button>
  <button class="ch-tab">Branch Appraisal</button>
</div>

---

Horizontal scrolling

If you have a number of tabs and they’re likely to be cut off at smaller breakpoints, you can add ch-tab__wrapper to the outer container to enable horizontal scrolling.

<div class="ch-bb--1 ch-bc--grey-3 ch-tab__wrapper">
  <button class="ch-tab">Gallery</button>
  <button class="ch-tab ch-tab--selected">Customer Appraisal</button>
  <button class="ch-tab">Branch Appraisal</button>
  <button class="ch-tab">Even More Appraisals</button>
</div>

---

CSS-only tabs

It’s possible to create tabbed content without JavaScript using restyled radio button inputs.

<input class="ch-reader" id="tab1" name="tabs" type="radio" checked />
<label class="ch-tab" for="tab1"> Summary </label>
<input class="ch-reader" id="tab2" name="tabs" type="radio" />
<label class="ch-tab" for="tab2"> Technical specifications </label>
<input class="ch-reader" id="tab3" name="tabs" type="radio" />
<label class="ch-tab" for="tab3"> Independent review </label>

<hr class="ch-bg--grey-3 ch-mb--4" />

<div id="content1">...</div>
<div id="content2">...</div>
<div id="content3">...</div>

In your application, give each tab and content panel a corresponding ID, and set content panels to display: none by default. Add the following CSS to handle switching the active content:

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

---