Skip to content
Nama — Theme Docs

Buttons

A simple flex container for button links inside article body content. Buttons sit side by side on desktop and stack vertically on mobile. Use any combination of .btn, .btn-sm, .btn-secondary, or .btn-link classes.

Syntax

Section titled “Syntax”

Pill Button (with arrow)

Section titled “Pill Button (with arrow)”
<div data-nama="buttons" class="nama-buttons">
  <a href="/blogs/recipes/something" class="btn btn-sm">
    <span>Get the Recipe</span>
    <span class="btn__arrow" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M8.97583 0.287109L13.6096 4.78711L13.7053 4.87891L13.6096 4.97168L8.95532 9.47168L8.85474 9.56836L8.76685 9.46094L8.56079 9.21094L8.49536 9.13184L8.55786 9.05078L11.426 5.32031H0.128174V4.4375H11.427L8.57837 0.707031L8.51685 0.625977L8.5813 0.546875L8.78735 0.296875L8.87622 0.189453L8.97583 0.287109Z" stroke-width="0.257052"/></svg></span>
  </a>
</div>

Pill Button (no arrow)

Section titled “Pill Button (no arrow)”
<div data-nama="buttons" class="nama-buttons">
  <a href="/link" class="btn btn-sm"><span>Label</span></a>
</div>

Text Link Button (with arrow)

Section titled “Text Link Button (with arrow)”
<div data-nama="buttons" class="nama-buttons">
  <a href="/blogs/recipes/something" class="btn-link btn-sm">
    <span>Get the Recipe</span>
    <span class="btn__arrow" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M8.97583 0.287109L13.6096 4.78711L13.7053 4.87891L13.6096 4.97168L8.95532 9.47168L8.85474 9.56836L8.76685 9.46094L8.56079 9.21094L8.49536 9.13184L8.55786 9.05078L11.426 5.32031H0.128174V4.4375H11.427L8.57837 0.707031L8.51685 0.625977L8.5813 0.546875L8.78735 0.296875L8.87622 0.189453L8.97583 0.287109Z" stroke-width="0.257052"/></svg></span>
  </a>
</div>

Multiple Buttons

Section titled “Multiple Buttons”
<div data-nama="buttons" class="nama-buttons">
  <a href="/link-one" class="btn btn-sm">
    <span>Primary CTA</span>
    <span class="btn__arrow" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M8.97583 0.287109L13.6096 4.78711L13.7053 4.87891L13.6096 4.97168L8.95532 9.47168L8.85474 9.56836L8.76685 9.46094L8.56079 9.21094L8.49536 9.13184L8.55786 9.05078L11.426 5.32031H0.128174V4.4375H11.427L8.57837 0.707031L8.51685 0.625977L8.5813 0.546875L8.78735 0.296875L8.87622 0.189453L8.97583 0.287109Z" stroke-width="0.257052"/></svg></span>
  </a>
  <a href="/link-two" class="btn-link btn-sm">
    <span>Secondary Link</span>
    <span class="btn__arrow" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M8.97583 0.287109L13.6096 4.78711L13.7053 4.87891L13.6096 4.97168L8.95532 9.47168L8.85474 9.56836L8.76685 9.46094L8.56079 9.21094L8.49536 9.13184L8.55786 9.05078L11.426 5.32031H0.128174V4.4375H11.427L8.57837 0.707031L8.51685 0.625977L8.5813 0.546875L8.78735 0.296875L8.87622 0.189453L8.97583 0.287109Z" stroke-width="0.257052"/></svg></span>
  </a>
</div>
Section titled “External Link”
<a href="https://example.com" target="_blank" rel="noopener noreferrer" class="btn btn-sm">
  <span>External Link</span>
  <span class="btn__arrow" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M8.97583 0.287109L13.6096 4.78711L13.7053 4.87891L13.6096 4.97168L8.95532 9.47168L8.85474 9.56836L8.76685 9.46094L8.56079 9.21094L8.49536 9.13184L8.55786 9.05078L11.426 5.32031H0.128174V4.4375H11.427L8.57837 0.707031L8.51685 0.625977L8.5813 0.546875L8.78735 0.296875L8.87622 0.189453L8.97583 0.287109Z" stroke-width="0.257052"/></svg></span>
</a>

Arrow

Section titled “Arrow”

The arrow is a <span class="btn__arrow"> containing the theme’s SVG arrow icon. It matches the arrows used sitewide in the button snippet.

  • Pill buttons (btn) — arrow is optional but recommended for consistency
  • Link buttons (btn-link) — arrow is the primary visual indicator, always include it
  • The aria-hidden="true" on the arrow span keeps it out of screen readers

Copy-paste the arrow snippet:

<span class="btn__arrow" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M8.97583 0.287109L13.6096 4.78711L13.7053 4.87891L13.6096 4.97168L8.95532 9.47168L8.85474 9.56836L8.76685 9.46094L8.56079 9.21094L8.49536 9.13184L8.55786 9.05078L11.426 5.32031H0.128174V4.4375H11.427L8.57837 0.707031L8.51685 0.625977L8.5813 0.546875L8.78735 0.296875L8.87622 0.189453L8.97583 0.287109Z" stroke-width="0.257052"/></svg></span>

Specs

Section titled “Specs”
Element Style
Layout flex-wrap: wrap, row on desktop, column on mobile.
Gap 16px mobile, 24px desktop.
Top margin (inside .rte) 16px mobile, 24px desktop.
Mobile Stacks vertically, aligned left.

Button Classes

Section titled “Button Classes”
Class Style
btn btn-sm Pill button — charcoal border, rounded-full, small padding. Hover: kale fill.
btn btn-secondary btn-sm Light-charcoal fill with white text.
btn btn-tertiary btn-sm White fill with charcoal text.
btn-link btn-sm Text link — no border/background, just text + arrow. Hover: kale text. Don’t combine with .btn.

Tips

Section titled “Tips”
  • Always wrap button text in a <span> — required for the theme’s button styling.
  • btn-link is a separate base class from btn. Never use btn btn-link.
  • One button is fine. The container handles singles and multiples identically.
  • For external links, always add target="_blank" rel="noopener noreferrer".
  • Always include class="nama-buttons" on the container so styling survives the visual editor.
  • This block is for article body content only. For section-level buttons, use the blocks/buttons.liquid theme block instead.