Skip to main content

Cards & Layout

Card

Article element with header/body/footer slots and hover affordance.

Element
<article>
Module
@basenative/components
Function
renderCard

Quick start

Import the render function and call it from your server template.

import { renderCard } from '@basenative/components';

renderCard({ header: 'Title', body: '<p>Body</p>', footer: 'Updated now' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Article with header, body, footer

Built on the article element. Hover lifts the border.

Live render
Card Title

Card body content with descriptive text about the feature or item being presented.

Updated 2 hours ago
Source
renderCard({
  header: 'Card Title',
  body:   '<p>Card body content…</p>',
  footer: 'Updated 2 hours ago',
})

Live editing

Type in the input to update the card title in real time.

Live render
Source
const title = signal('Project Atlas');

// renderCard() is a server helper; in the browser the signal drives the markup directly.
effect(() => {
  slot.innerHTML =
    '<article data-bn="card">' +
    '<header data-bn="card-header">' + title() + '</header>' +
    '<div data-bn="card-body"><p>The card title comes from a signal.</p></div>' +
    '<footer data-bn="card-footer">Live preview</footer>' +
    '</article>';
});

input.oninput = (e) => title.set(e.target.value || ' ');

Options

Arguments accepted by renderCard().

renderCard option reference
Option Type Default Description
header string '' Card header HTML.
body string '' Card body HTML.
footer string '' Card footer HTML.