Course 302 5 min

Design your own page

Publish your own HTML as your public card. Your data fills in automatically.

The built-in looks share one assumption — eKard arranges your page. This course removes it. A Kard's owner can replace the public page's body with HTML they wrote themselves, served at the same link and filled with the same live card data. One honest requirement: you write the HTML and CSS yourself. If you would rather not, the course on choosing a layout covers the seven ready-made looks.

From draft to live

  1. Open the Kard's Settings → Custom design panel and press "Open design editor".
  2. Write your page. On first visit the editor is pre-filled with a working starter design that uses every kind of slot, and a cheat sheet — "What can I put in my design? (cheat sheet)" — sits in the editor with copy-paste examples.
  3. Press "Save draft". Drafts never reach visitors; the live page keeps its current look.
  4. Press "Preview draft" — the saved draft opens in a new tab, visible only to you, rendered exactly as publishing will render it.
  5. Press "Save & publish". Visitors now see your design at your link.

Step back any time with "Revert to standard design": visitors see your chosen built-in layout again, and the draft stays saved in the editor, ready to re-publish later.

Slots keep the design current

Static HTML would go stale the day you changed a phone number. The data-kard-* attributes prevent that: they mark elements eKard fills with live card data each time the page renders. <h1 data-kard="name"></h1> becomes your name; <img data-kard-attr="src:photo_url alt:name"> becomes your photo; a container marked data-kard-each="custom_links" repeats its first row once per link, and the same pattern lists your documents and contact channels. data-kard-action wires eKard behaviours — save-contact, the exchange sheet, your QR page — and data-kard-requires removes a section when the data behind it is empty. Because the fill happens at render time, editing your card later updates the published design automatically. No re-publish.

Publishing cleans the page

"Save & publish" sanitizes a copy of your draft before it goes live. Scripts never survive, and neither does anything fetched from another server — external images, stylesheets, fonts and frames are all stripped. So your CSS lives in the page, in <style> blocks or style attributes, and images come from the card's own fields (such as photo_url) or ride along as inline data: images. The publish notice reports what was stripped and why — nothing disappears silently.

Good to know

Sanitizing touches a copy, not your work: the draft keeps its original text, so anything stripped stays in the editor for you to rework. But each Kard holds exactly one draft — saving overwrites it, with no version history — and a design can be up to 150,000 characters.

While your design is live

Settings says it plainly: "Your own design is live on this kard. The layout picker above is ignored while it is published." The built-in looks stay reachable for comparison — add ?layout=<name> to your card's URL to see any of them beside your own work. eKard still runs the page's plumbing: the browser title, the share preview and view counting carry on unchanged, and publishing refreshes the page's cache worldwide within about a minute. Custom designs are included on every plan.

Open your Kards →