Spacing

Use tokens in code

<section className="tpz-p-m">Medium padded section</section>

<div className="tpz-p-s">
  <h2>Small padded card</h2>
</div>

padding: var(--tpz-padding-medium);
gap: var(--tpz-padding-small);
margin-bottom: var(--tpz-padding-large);

<div style={{ padding: "var(--tpz-padding-large)" }}>
  Large padded container
</div>

Change values in engine

From your /dashboard on tapuz.io, open any project and click Manage tokens to launch the tapuz engine. Changes are saved automatically and take effect instantly. Undo/redo is available throughout the session.

Change values via editor

Open the editor locally from any project page by typing /?tapuz-edit OR via the project slot in your /dashboard in tapuz.io and go to the Spacing tab. Change any values and watch the preview in real time. You can undo/redo any change. When you are ready, click Save to make your changes permanent. For online editing read here.

Full spacing tokens