Obelisk

Knowledge baseExamplesTry it yourself
Home

/

Features

/

Blocks

Blocks

The individual building blocks that make up your pages. Click through for an explanation and a code example.

Breadcrumb trail

Breadcrumb trail

Shows visitors where they are on the site, with automatic separators and structured data for Google.

View block

→

Code example

Code example

Displays code neatly formatted with colours, a title bar and a copy button — like every code example on this site.

View block

→

Counting numbers

Counting numbers

Counts a number up live as it comes into view — perfect for statistics like '1200+ customers' or '99.9% uptime'.

View block

→

Cta

Cta

Call-to-action section with a title and a button.

View block

→

Discussion view

Discussion view

Shows one discussion topic with all replies and a reply field for logged-in visitors.

View block

→

Email preferences

Email preferences

A page where subscribers unsubscribe or re-subscribe to your mailings with one click.

View block

→

FAQ

FAQ

Accordion with frequently asked questions, including automatic FAQPage structured data.

View block

→

Form

Form

Form that submits to the Obelisk API, with automatic client-side validation.

View block

→

FormatDate

FormatDate

Shows a date neatly formatted in your site's language.

View block

→

FormatNumber

FormatNumber

Shows numbers, prices or percentages neatly formatted.

View block

→

Formatted text

Formatted text

Displays text from a data field with its formatting — bold, links and headings — instead of as plain text.

View block

→

Forum overview

Forum overview

Shows all forums of your site as clickable cards — the front door of your own community.

View block

→

Forum topic list

Forum topic list

Shows the discussion topics of one forum, with a button to start a new topic.

View block

→

Hero

Hero

A striking header section with a title, subtitle and a call-to-action button.

View block

→

Horizontally scrolling panels

Horizontally scrolling panels

A row of panels slides past horizontally while the visitor simply scrolls vertically — the well-known showcase effect from gsap.com.

View block

→

Icon

Icon

Font Awesome 6 icon as inline SVG, styleable with Chakra props.

View block

→

ImageGallery

ImageGallery

Image gallery with thumbnail strip, zoom dialog, autoplay and crossfade.

View block

→

Input field

Input field

A single form field, with a label, helper text and automatic validation of the input.

View block

→

LanguageSwitcher

LanguageSwitcher

Automatically shows the site's available languages as a switcher.

View block

→

List repeater

List repeater

Repeats a piece of markup for every item in a list — for example a badge per tag of an article.

View block

→

MobileMenu

MobileMenu

A hamburger button that opens a slide-out menu on mobile.

View block

→

Multiple-choice question

Multiple-choice question

A question with radio buttons in a form — ideal for yes/no questions, tests and quizzes.

View block

→

Pagination

Pagination

Automatically splits a long list across multiple pages, with previous/next buttons and page numbers.

View block

→

Parallax depth effect

Parallax depth effect

Gives a page depth by letting an image or section move at a different pace with the scroll — the classic parallax effect.

View block

→

PhoneMockup

PhoneMockup

Shows an image or content in a phone frame.

View block

→

Pinned section

Pinned section

Pins a block in view for a moment while the page scrolls on underneath — for a message that should stick.

View block

→

Previous/next navigation

Previous/next navigation

Automatically puts links to the previous and next item and back to the overview at the bottom of a detail page.

View block

→

Records

Records

Iterates over the records of a data type and renders your own markup per record.

View block

→

Reveal on scroll

Reveal on scroll

Makes headings, images or entire sections appear smoothly the moment the visitor scrolls to them — no configuration needed.

View block

→

Search

Search

Live search bar that searches published pages by title, description and content.

View block

→

Step-by-step story

Step-by-step story

The section stays in view and the content appears step by step while scrolling — scrollytelling in a single tag.

View block

→

Swiper

Swiper

A carousel that slides your items horizontally.

View block

→

TableOfContents

TableOfContents

Automatically builds a clickable table of contents from the headings on the page.

View block

→

Typewriter

Typewriter

Types text letter by letter with a blinking cursor; optionally loops through multiple phrases.

View block

→

Free · no strings attached

Try Obelisk yourself

Answer a few short questions and the AI assistant sets up your own site. Then you keep building it yourself — in plain language.

Try it yourself