# Component Showcase

Every building block available in Quickland, demonstrated on a single page. Use these components to craft landing pages, portfolios, and link-in-bio pages — all from your AI editor.

[Start building free](https://app.quickland.app)

## Text

The text block is the most versatile component. It supports three heading sizes and three alignment options. Use it for titles, descriptions, paragraphs, or any written content.

# Heading H1

The largest heading size. Use it for main page titles and hero sections.

## Heading H2

Mid-level heading. Great for section titles and feature group headers.

### Heading H3

The smallest heading. Perfect for card titles, list items, and supporting details.

## Buttons

Call-to-action buttons with three style variants. Each can link to any URL and open in a new tab.

[Solid Button](https://app.quickland.app)

[Outline Button](https://app.quickland.app)

[Ghost Button](https://app.quickland.app)

## Image

Display images with three width options (full, medium, small), alignment control, optional link wrapping, and adjustable border radius.

![Developer workspace with laptop showing code editor](https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&q=80)

## Icons

Add visual accents with icons in three sizes. Each icon supports custom color and alignment.

## Gallery

A responsive image grid with configurable columns (2–6), gap spacing, and border radius. Perfect for portfolios, product shots, or team photos.

1. ![Code on a laptop screen](https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&q=80)
2. ![Programming setup with monitors](https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=600&q=80)
3. ![Developer coding at desk](https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=600&q=80)
4. ![Code snippets on screen](https://images.unsplash.com/photo-1504639725590-34d0984388bd?w=600&q=80)
5. ![Tech workspace](https://images.unsplash.com/photo-1550439062-609e1531270e?w=600&q=80)
6. ![Hands typing on keyboard](https://images.unsplash.com/photo-1587620962725-abab7fe55159?w=600&q=80)

## Dividers

Vertical spacing and optional horizontal lines to separate content sections. Control height, line visibility, color, and thickness.

Invisible spacer (32px height, no line):

Thin line divider:

Thick line divider:

## Section Layouts

Sections are layout containers that arrange child elements in columns (1–3). They can also serve as hero wrappers with full-height backgrounds. Here’s a 2-column section mixing text, icons, and buttons.

### Flexible grid layouts

Sections support 1, 2, or 3 column grids. Nest text, buttons, images, icons, galleries, and dividers inside them to build any layout you need.

## Form

Collect leads, feedback, or signups with configurable forms. Add text, email, and textarea fields — each with optional required validation.

**Get in touch**

Drop us a message and we'll get back to you within 24 hours.

- Your name (text, required)
- Email address (email, required)
- Your message (textarea)

Submit: Send message

## Video

Embed any YouTube or Vimeo video with an optional caption. Supports left, center, or right alignment.

[Video](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

> Embed any YouTube or Vimeo URL — the player renders automatically.

## Countdown Timer

Create urgency with a live countdown to any future date. The timer ticks down in real time and supports a heading and alignment options.

**Product Hunt launch in** — Countdown to 2026-07-01T00:00:00Z

## That’s every component.

Mix and match these building blocks to create any landing page, portfolio, or link-in-bio. All manageable from your AI editor via MCP.

[Start building — it’s free](https://app.quickland.app)