Obelisk
/
Blocks
The individual building blocks that make up your pages. Click through for an explanation and a code example.
Shows visitors where they are on the site, with automatic separators and structured data for Google.
View block
→
Displays code neatly formatted with colours, a title bar and a copy button — like every code example on this site.
Counts a number up live as it comes into view — perfect for statistics like '1200+ customers' or '99.9% uptime'.
Call-to-action section with a title and a button.
Shows one discussion topic with all replies and a reply field for logged-in visitors.
A page where subscribers unsubscribe or re-subscribe to your mailings with one click.
Accordion with frequently asked questions, including automatic FAQPage structured data.
Form that submits to the Obelisk API, with automatic client-side validation.
Shows a date neatly formatted in your site's language.
Shows numbers, prices or percentages neatly formatted.
Displays text from a data field with its formatting — bold, links and headings — instead of as plain text.
Shows all forums of your site as clickable cards — the front door of your own community.
Shows the discussion topics of one forum, with a button to start a new topic.
A striking header section with a title, subtitle and a call-to-action button.
A row of panels slides past horizontally while the visitor simply scrolls vertically — the well-known showcase effect from gsap.com.
Font Awesome 6 icon as inline SVG, styleable with Chakra props.
Image gallery with thumbnail strip, zoom dialog, autoplay and crossfade.
A single form field, with a label, helper text and automatic validation of the input.
Automatically shows the site's available languages as a switcher.
Repeats a piece of markup for every item in a list — for example a badge per tag of an article.
A hamburger button that opens a slide-out menu on mobile.
A question with radio buttons in a form — ideal for yes/no questions, tests and quizzes.
Automatically splits a long list across multiple pages, with previous/next buttons and page numbers.
Gives a page depth by letting an image or section move at a different pace with the scroll — the classic parallax effect.
Shows an image or content in a phone frame.
Pins a block in view for a moment while the page scrolls on underneath — for a message that should stick.
Automatically puts links to the previous and next item and back to the overview at the bottom of a detail page.
Iterates over the records of a data type and renders your own markup per record.
Makes headings, images or entire sections appear smoothly the moment the visitor scrolls to them — no configuration needed.
Live search bar that searches published pages by title, description and content.
The section stays in view and the content appears step by step while scrolling — scrollytelling in a single tag.
A carousel that slides your items horizontally.
Automatically builds a clickable table of contents from the headings on the page.
Types text letter by letter with a blinking cursor; optionally loops through multiple phrases.
