Content Elements

The actual content of your site. Use these components to communicate your message.

Text (Headings & Paragraphs)

Frame-based text components for all your written content. Available as presets for Heading 1-3, Paragraph, and Label, each with appropriate semantic HTML tags.

Preview

Stunning Headlines

Section Heading

Smooth and readable body text for your users. Perfect for paragraphs and longer content.

Small Label Text

When to use it

  • For page titles and section headings (H1, H2, H3).
  • For body text and descriptions (Paragraph).
  • For form labels and small text (Label).

Configurable Settings

Text ContentThe actual text to display (supports basic HTML).
HTML TagChoose h1-h6 for headings, p for paragraphs, label, or span.
Font SizeSelect from presets (xs to 6xl) or set custom size.
Font WeightControl text thickness from Thin (100) to Black (900).
Text ColorSet the color of your text.
Gradient TextEnable gradient text with customizable start/end colors and direction.
Text ShadowAdd depth with small, medium, large, or custom shadows.
Line Height & Letter SpacingFine-tune readability and visual style.

Buttons

Interactive frame-based buttons with multiple style variants. Buttons can trigger actions, submit forms, or navigate to other pages.

Preview

When to use it

  • For Call-to-Actions (CTAs) like 'Sign Up' or 'Get Started'.
  • To link to other pages or external sites.
  • To submit forms or trigger interactions.

Configurable Settings

Button TypeChoose Generic Button, Submit Form, or Reset Form.
Style VariantPrimary (solid dark), Outline (border only), Ghost (transparent), or Submit (blue).
Fill ColorBackground color for the button.
BorderAdd borders with custom width, color, and style.
Corner RadiusControl button roundness.
Padding & SizeAdjust button dimensions and internal spacing.
Loading StateShow loading indicator during form submission.

Image

A flexible frame-based image container that can act as a clickable link. Perfect for photos, graphics, and visual content.

Preview

Example

When to use it

  • To display product photos or team images.
  • For hero images and visual backgrounds.
  • As clickable image links to other pages.

Configurable Settings

Aspect RatioForce specific proportions like 16:9, 1:1 (square), or custom ratios.
SizeControl width, height, and max dimensions.
FillSet background color or image for the container.
Corner RadiusRound the corners of your image container.
Link (href)Make the image clickable by setting a URL.
TargetOpen link in same window or new tab.

Icon

Customizable icon component with color and size controls. Uses the Basicons icon library for consistent, scalable icons.

Preview

When to use it

  • For feature highlights and visual indicators.
  • In buttons alongside text.
  • As decorative elements in your design.

Configurable Settings

IconSelect from the Basicons icon library.
ColorSet the icon color.
WidthControl icon size (e.g., 24px, 2rem).