Tags and panels

Tag

<span class="pod-tag">Latest episode</span>

Panel

<div class="imp-card"><h2>Panel title</h2><p>Square corners, purple top edge, soft shadow.</p></div>

Row of boxes with arrows

Used for Not sure where to begin? on the home page. Boxes are 260px wide with a purple top edge. Previous and Next are real buttons, 52px square, and the row also scrolls by touch. Text with several lines becomes a list.

<div class="hp-railhead"><div class="hp-railbtns"><button class="hp-arr" type="button" aria-label="Previous" disabled><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M17 10H4M9 4l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg></button><button class="hp-arr" type="button" aria-label="Next"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 10h13M11 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg></button></div></div><ul class="hp-rail"><li class="hp-box"><h3>Box title</h3><p>One short line of text.</p><a class="hp-btn" href="#">Button</a></li><li class="hp-box"><h3>Box title</h3><p>One short line of text.</p><a class="hp-btn" href="#">Button</a></li><li class="hp-box"><h3>Box title</h3><p>One short line of text.</p><a class="hp-btn" href="#">Button</a></li></ul>

Subscribe box

A call-to-action box that stands out on a dark band.

<section class="pod-sub"><h2>Subscribe to the podcast</h2><p>New episodes arrive on your phone automatically.</p><ul class="pod-sub-list"><li><a class="pod-sub-btn" href="#"><svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><rect x="1" y="1" width="22" height="22" rx="5" fill="currentColor"/><circle cx="7" cy="17" r="2" fill="#fff"/><path d="M5.5 11a7.5 7.5 0 0 1 7.5 7.5M5.5 6A12.5 12.5 0 0 1 18 18.5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
<span>RSS feed</span></a></li></ul></section>