Codefluss Logo

Standard Components

Standard Components

These essential, constantly-used components cover the bulk of your visual layout requirements on landing pages:

Basic Building Blocks

  • Heading: Allows you to insert semantically correct headings (H1 - H6), which are critical for the website's SEO foundation.
  • Paragraph (Rich Text): Your primary block for standard text, descriptions, and detailed informational reading. Powered by a modern inline TipTap editor directly on the canvas.
  • Image: Add visual excitement to your layouts. The image is fully and automatically optimized natively within Next.js for rapid loading times (AVIF / WebP) and delivered from the cache.
  • Button: Indispensable for Call-To-Action interactions (CTAs) across the website—whether linking to checkout, a contact page, or external referrals.

Structure & Interaction

  • Container: A structural wrapper element. You use the container to group multiple pieces of content and bestow upon them shared layout properties within the grid (like a white background box with rounded corners and shadow).
  • Icon: Bring visual clues into your layout via simple scalable vector graphics.
  • Accordion (FAQ): Allows you to create interactive, expandable text areas (such as for Frequently Asked Questions) which save vertical scroll space.
  • Forms: For collecting valuable lead data. You can find more detail on this separately in the Forms documentation.