Web oluşturucunun çizdikleri

Aşağıdaki her blok, örnek verilerinden canlı olarak çizilir ve ardından aldığı özellikler gelir. Her ikisi de oluşturucunun kendi blok biçimlerinden gelir, bu nedenle bu sayfa kodla birlikte değişir.

Markalı karşılama alanı

Describe it. The AI builds the app.

Three steps.

Book a demo

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`zorunlu	The page's headline; without it the hero draws nothing.
`lede`	`text`	A sentence under the heading.
`accent`	`text`	The part of the heading drawn in the accent; a part the heading does not hold is not drawn so.
`align`	`text: start, center`	`center` centres the text and the actions; `start` is the default.
`question`	`text`	A line above the actions.
`primary`	`object`	The main call to action. Without `label`, or without `href` and the sheet, none is drawn.
`primary.label`	`text`zorunlu	The button's text.
`primary.href`	`text`	Where it leads: a path of the site, which takes the page's language, an address, or `mailto:`.
`primary.action`	`text: sheet`	`sheet` opens the site's contact sheet instead of `href`.
`primary.note`	`text`	A line beside the button, such as the mail address it writes to.
`secondary`	`object`	A second, quieter call to action. Without `label`, or without `href` and the sheet, none is drawn.
`secondary.label`	`text`zorunlu	The button's text.
`secondary.href`	`text`	Where it leads: a path of the site, which takes the page's language, an address, or `mailto:`.
`secondary.action`	`text: sheet`	`sheet` opens the site's contact sheet instead of `href`.
`secondary.note`	`text`	A line beside the button, such as the mail address it writes to.
`visual`	`text`	The plugin that draws the figure beside the text, by its id, or `none`.
`caption`	`text`	A line under the figure.
`atmosphere`	`text: none, data-rain`	What falls behind the hero; left out, the site's `hero_atmosphere`.
`rain`	`list, max 5`	The rain's columns, drawn only under the block's own `atmosphere`.
`rain[].tokens`	`texts`	The words of one column, top to bottom.

Adım çubuğu

From a sentence to running software.

1
Describe
what the business needs
You
2
Set up
once
Once
3
Run
every day

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.
`steps`	`list, max 4`zorunlu	Two to four steps, numbered in this order.
`steps[].icon`	`text`	A lucide icon name, such as `sparkles`, or an image of the site's assets, `assets/<file>`.
`steps[].title`	`text`zorunlu	The step's name.
`steps[].text`	`text`	A line under the name.
`steps[].tag`	`text`	A short label, such as who does the step.
`steps[].tag_tone`	`text: accent, plain`	`accent` marks the tag; `plain` is the default.

Akış adımı

It goes live by itself.

Automatic

The way to live

Test
Stage
Live

One updatereaches every customer

Prop	Tür	Ne içerir
`number`	`number`zorunlu	The step's place in the flow.
`heading`	`text`zorunlu	The step's heading.
`body`	`text`	A sentence under the heading.
`tag`	`text`	A short label, such as who does the step.
`tag_tone`	`text: accent, plain`	`accent` marks the tag; `plain` is the default.
`figure`	`variant: form, status, path`	What the step shows, drawn by its `kind`; without it the step draws its head only.
`figure(form).title`	`text`zorunlu	The record's kind, such as `Order`.
`figure(form).ref`	`text`	The record's number.
`figure(form).fields`	`list, max 6`	Its fields, two by two.
`figure(form).fields[].label`	`text`zorunlu	The field's name.
`figure(form).fields[].value`	`text`zorunlu	What it holds.
`figure(form).states`	`texts, max 6`	Its states in order.
`figure(form).current`	`text`	The state marked as current.
`figure(status).layout`	`text: stack, row`	`row` lays the rows out side by side from a medium screen up; `stack` is the default.
`figure(status).rows`	`list, max 6`zorunlu	What is set up, one row each.
`figure(status).rows[].label`	`text`zorunlu	What the row is, such as `App`.
`figure(status).rows[].value`	`text`zorunlu	Its value.
`figure(status).rows[].note`	`text`	A line beside the value.
`figure(status).rows[].stages`	`texts, max 6`	The stages the row went through.
`figure(path).heading`	`text`	A line above the path.
`figure(path).stages`	`texts, max 6`zorunlu	The stages in order.
`figure(path).current`	`text`	The stage the runner reaches; the first when left out.
`figure(path).update`	`object`	A note under the path.
`figure(path).update.heading`	`text`zorunlu	The note's heading.
`figure(path).update.text`	`text`	A line under it.
`figure(path).update.count`	`number`	How many small marks stand for whom it reaches.
`figure(path).update.icon`	`text`	A lucide icon name, or an image of the site's assets, `assets/<file>`.

Ekran özelliği

Everything your app needs, included.

includedWith every app.

Your app

In all your languages
Light and dark

Prop	Tür	Ne içerir
`icon`	`text`	A lucide icon name or an image of the site's assets, `assets/<file>`, in the head's tile.
`heading`	`text`zorunlu	The section's heading.
`lede`	`text`	A sentence under the heading.
`badge`	`text`	A short accent label on a line of its own, such as `included`.
`badge_note`	`text`	A line beside the badge.
`title`	`text`	The card's title.
`text`	`text`	A line under the card's title.
`link_label`	`text`	A text button beside the card's title that opens `link_shot` large.
`link_shot`	`object`	The screenshot `link_label` opens.
`link_shot.light`	`text`zorunlu	The image in light mode, and in both modes without a `dark` twin.
`link_shot.dark`	`text`	Its twin in dark mode.
`link_shot.alt`	`text`zorunlu	What the image shows, for a reader who cannot see it.
`link_shot.paper`	`flag`	A printed page: one image, the same in both modes, drawn whole.
`screens`	`list, max 2`zorunlu	One or two screenshots: a desktop one, and a phone beside it.
`screens[].light`	`text`zorunlu	The image in light mode, and in both modes without a `dark` twin.
`screens[].dark`	`text`	Its twin in dark mode.
`screens[].alt`	`text`zorunlu	What the image shows, for a reader who cannot see it.
`screens[].paper`	`flag`	A printed page: one image, the same in both modes, drawn whole.
`screens[].label`	`text`	A short label on the image, such as `Phone`.
`screens[].frame`	`text: desktop, phone`	`phone` draws it in a phone's frame; `desktop` is the default.
`points`	`texts, max 6`	Short points under the screens.

Merkez

The core

The engine

Reads what was built and serves it.

One core feeds them all.

App
Websites
Reports

Prop	Tür	Ne içerir
`label`	`text`	A short line above the heading.
`heading`	`text`zorunlu	The core's name.
`body`	`text`	A line under the heading.
`core`	`text`	A lucide icon name or an image of the site's assets, `assets/<file>`, drawn between the arrows.
`note`	`text`	A line above the outputs.
`outputs`	`texts, max 6`zorunlu	What the core feeds, one to six, in order.

Görüntü kartları

A website — WebsitesPages, menu and forms.

Reminders and imports, finished even after an interruption.

JobsDone in the background.

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.
`cards`	`list, max 4`zorunlu	One to four cards, in a row from wide screens up.
`cards[].title`	`text`zorunlu	The card's name.
`cards[].text`	`text`	A line under the name.
`cards[].shots`	`list, max 2`	None, one or two screenshots on top of the card, side by side.
`cards[].shots[].light`	`text`zorunlu	The image in light mode, and in both modes without a `dark` twin.
`cards[].shots[].dark`	`text`	Its twin in dark mode.
`cards[].shots[].alt`	`text`zorunlu	What the image shows, for a reader who cannot see it.
`cards[].shots[].paper`	`flag`	A printed page: one image, the same in both modes, drawn whole.
`cards[].icon`	`text`	Without a screenshot: a lucide icon name or an image of the site's assets, `assets/<file>`, on top of the card.
`cards[].icon_text`	`text`	Without a screenshot: a sentence under that icon.

Açılır bölümler

For engineers

What an app is made of

Order.entity.jsonorder.ts

Artefact	What it does
entity JSON	The records and their fields

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.
`items`	`list, max 8`zorunlu	The panels, closed until a reader opens one.
`items[].summary`	`text`zorunlu	The panel's line, which opens it.
`items[].chips`	`list, max 16`	Short labels, such as file names.
`items[].chips[].label`	`text`zorunlu	The chip's text.
`items[].chips[].tone`	`number`	1 to 6: one of six marks from the theme's accent, so chips of one kind match; 1 when left out.
`items[].head`	`texts, max 2`	The table's column heads, one or two; a missing second one stays empty.
`items[].rows`	`list, max 16`	The table's rows.
`items[].rows[].label`	`text`zorunlu	The left cell.
`items[].rows[].value`	`text`zorunlu	The right cell.

Kapanış paneli

See it live, with your own process.

We show live demos by appointment.

Book a live demohello@example.com

Prop	Tür	Ne içerir
`heading`	`text`zorunlu	The panel's heading; without it the panel draws nothing.
`body`	`text`	A line under the heading.
`primary`	`object`	The main call to action. Without `label`, or without `href` and the sheet, none is drawn.
`primary.label`	`text`zorunlu	The button's text.
`primary.href`	`text`	Where it leads: a path of the site, which takes the page's language, an address, or `mailto:`.
`primary.action`	`text: sheet`	`sheet` opens the site's contact sheet instead of `href`.
`primary.note`	`text`	A line beside the button, such as the mail address it writes to.
`secondary`	`object`	A second, quieter call to action. Without `label`, or without `href` and the sheet, none is drawn.
`secondary.label`	`text`zorunlu	The button's text.
`secondary.href`	`text`	Where it leads: a path of the site, which takes the page's language, an address, or `mailto:`.
`secondary.action`	`text: sheet`	`sheet` opens the site's contact sheet instead of `href`.
`secondary.note`	`text`	A line beside the button, such as the mail address it writes to.
`note`	`text`	A small line under the actions.
`frame`	`text: card, none`	`none` draws the panel without its card, border and glow; `card` is the default.

Sütunlar

What we stand on

Open

Every book is on the shelf.

Free

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.
`items`	`list`zorunlu	The pillars; one without a title is left out.
`items[].num`	`text`	A short mark above the title, such as `01`.
`items[].title`	`text`zorunlu	The pillar's title.
`items[].body`	`text`	A sentence under the title.

Yığın

The products

Lending

kullanılabilir

Loans and returns.

Shop

yakında

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.
`items`	`list`zorunlu	The products; one with neither a title nor a lockup is left out.
`items[].title`	`text`	The product's name, where no lockup draws it.
`items[].lockup`	`object`	The product's name as a family lockup, such as `digita ● shop`.
`items[].lockup.family`	`text`	The family's word.
`items[].lockup.product`	`text`	The product's word.
`items[].status`	`text: available, early_access, coming`	How available the product is today.
`items[].body`	`text`	A sentence under the name.
`items[].href`	`text`	Where the card's link leads; drawn only with `link_label`.
`items[].link_label`	`text`	The link's text.

İşlem hattı

How a loan works

1
Reserve
2
Collect
within a week

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.
`stages`	`list`zorunlu	The stages in order; one without a title is left out.
`stages[].stage`	`text`	A short mark above the title, such as `Step 1`.
`stages[].title`	`text`zorunlu	The stage's title.
`stages[].body`	`text`	A sentence under the title.
`stages[].target`	`text`	A line at the card's foot, such as how long the stage takes.

Karşılaştırma

Before and after

	Before	After
Loans	BeforeOn paper	AfterIn the app

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.
`columns`	`texts, max 2`zorunlu	The two columns' heads; without both nothing is drawn.
`rows`	`list`zorunlu	The rows; one without an aspect is left out.
`rows[].aspect`	`text`zorunlu	What the row compares.
`rows[].a`	`text`	The first column's cell.
`rows[].b`	`text`	The second column's cell.

Kontrol listesi

What you need

An IDany official one
An address

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`items`	`list`zorunlu	The points; one without `what` is left out.
`items[].what`	`text`zorunlu	The point.
`items[].note`	`text`	A line beside it.

Segmentler

Who reads here

Students

who study here

Quiet desks

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.
`items`	`list`zorunlu	The segments; one without a title is left out.
`items[].mark`	`text`	A short mark above the title.
`items[].title`	`text`zorunlu	The segment's title.
`items[].who`	`text`	Who it is for.
`items[].gain`	`text`	What they gain, at the card's foot.

Sinyaller

In short

Free
Open six days
In the town centre

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`items`	`texts`zorunlu	The short claims, one per line.
`note`	`text`	A small line under them.

Karşılama alanı

Borrow a book today

Every book, three weeks at a time.

How to join

Prop	Tür	Ne içerir
`heading`	`text`zorunlu	The page's headline; without it the hero draws nothing.
`subheading`	`text`	A sentence under the headline.
`cta_label`	`text`	The button's text; drawn only with `cta_href`.
`cta_href`	`text`	Where the button leads.

Zengin metin

Visit us

Open Monday to Saturday.

The reading room closes an hour earlier.

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.
`body`	`text`	The text; an empty line starts a new paragraph.
`primary`	`object`	A call to action under the text. Without `label`, or without `href` and the sheet, none is drawn.
`primary.label`	`text`zorunlu	The button's text.
`primary.href`	`text`	Where it leads: a path of the site, which takes the page's language, an address, or `mailto:`.
`primary.action`	`text: sheet`	`sheet` opens the site's contact sheet instead of `href`.
`primary.note`	`text`	A line beside the button, such as the mail address it writes to.
`secondary`	`object`	A second, quieter call to action. Without `label`, or without `href` and the sheet, none is drawn.
`secondary.label`	`text`zorunlu	The button's text.
`secondary.href`	`text`	Where it leads: a path of the site, which takes the page's language, an address, or `mailto:`.
`secondary.action`	`text: sheet`	`sheet` opens the site's contact sheet instead of `href`.
`secondary.note`	`text`	A line beside the button, such as the mail address it writes to.
`note`	`text`	A small line under the actions.
`align`	`text: start, center`	`center` centres the text; `start` is the default.
`size`	`text: normal, small`	`small` sets the lede as a small aside; `normal` is the default.

Özellik ızgarası

What members get

Three weeks

Every loan runs three weeks.

Reservations

Prop	Tür	Ne içerir
`heading`	`text`	The section's heading.
`items`	`list`	The cards, three in a row on a wide screen.
`items[].title`	`text`	The card's title.
`items[].body`	`text`	A line under the title.

İstatistikler

Books: 12,000
Members: 800

Prop	Tür	Ne içerir
`items`	`list`zorunlu	The figures, up to four in a row on a wide screen.
`items[].label`	`text`	What the figure counts.
`items[].value`	`text`	The figure.

Medya

The reading room

Prop	Tür	Ne içerir
`image`	`text`	The image as a file id or `assets/<file>`; it wins over `src`.
`src`	`text`	The image's address.
`alt`	`text`	What the image shows, for a reader who cannot see it.
`caption`	`text`	A line under the image.

Eylem çağrısı

Join today

Membership is free.

Join

Prop	Tür	Ne içerir
`heading`	`text`	The panel's heading.
`body`	`text`	A line under the heading.
`cta_label`	`text`	The button's text; drawn only with `cta_href`.
`cta_href`	`text`	Where the button leads.

Gömme

Prop	Tür	Ne içerir
`src`	`text`zorunlu	The address the frame shows; without it nothing is drawn.
`title`	`text`	The frame's title for a screen reader.

Kod

One file

book.entity.jsonjson

{ "name": "Book" }

Prop	Tür	Ne içerir
`code`	`text`zorunlu	The code, as it is shown; without it nothing is drawn.
`title`	`text`	A file name or title above the code.
`language`	`text`	The language's name, shown as a badge.
`heading`	`text`	The section's heading.
`intro`	`text`	A sentence above the code.
`caption`	`text`	A line under the code.

İletişim bilgileri

Find us

Town LibraryMain Street 11000 Towndesk@example.org

Prop	Tür	Ne içerir
`heading`	`text`	The section's heading.
`body`	`text`	A sentence under the heading.
`address`	`texts`zorunlu	The postal address, one line each; without it nothing is drawn.
`email`	`text`	The mail address.
`phone`	`text`	The phone number.
`booking_url`	`text`	Where the booking button leads; drawn only with `booking_label`.
`booking_label`	`text`	The booking button's text.
`form`	`object`	The contact sheet's own texts; each one left out keeps the site's text.
`form.title`	`text`	The sheet's title.
`form.heading`	`text`	The heading above the form.
`form.lede`	`text`	A sentence under it.
`form.name`	`text`	The name field's label.
`form.email`	`text`	The mail field's label.
`form.message`	`text`	The message field's label.
`form.messagePlaceholder`	`text`	The message field's hint.
`form.send`	`text`	The send button's text.

Uygulama listesi

The apps

Demoyu deneyin, kayıt gerekmez: Demoyu hemen, demo kullanıcısı olarak açar.
Hesabınız var mı? Giriş yapın: Uygulamanın girişini kendi hesabınız için açar.

Bisiklet atölyeleri

Veloluck bisiklet atölyesi
Müşteriler ve bisikletleri, kabulden teslime iş emirleri, teklifler ve İsviçre QR faturaları.
Bisiklet atölyeleri
Demoyu deneyin, kayıt gerekmez Hesabınız var mı? Giriş yapın
Web sitesi Nasıl çalışır

Prop	Tür	Ne içerir
`eyebrow`	`text`	A short line above the heading.
`heading`	`text`	The section's heading.
`lede`	`text`	A sentence under the heading.