Twig Components

A collection of UI components for building easily web interfaces.

Structure

Grid

Grid

Basic grid layout system for organizing content.

block-grid View Demo
Header

Header

Page header component with navigation options.

block-header View Demo
Footer

Footer

Page footer component with various layouts.

block-footer View Demo
Tabs

Tabs

Tabbed content interface, with horizontal and vertical layout.

block-tabs View Demo

Content

Hero

Hero

Eye-catching hero section for landing pages.

block-hero View Demo
Steps

Steps

Step-by-step guide component with variable steps and arrow design.

block-steps View Demo
Timeline

Timeline

Chronological event display with configurable alignment.

block-timeline View Demo
Table

Table

Data table component with styling options.

block-table View Demo
Title

Title

Customizable title component.

block-title View Demo
Box

Box

Simple box container for content.

block-box View Demo
Card

Card

Card component for content display.

block-card View Demo
Card Grid

Card Grid

Grid layout for multiple cards.

block-card-grid View Demo

Media

Image

Image

Enhanced image display component.

block-image View Demo
Image Grid

Image Grid

Grid layout for image galleries.

block-image-grid View Demo
Video

Video

Video player component.

block-video View Demo
Video Grid

Video Grid

Grid layout for multiple videos.

block-video-grid View Demo
Text Image

Text Image

Combined text and image layout.

block-text-image View Demo
Text Video

Text Video

Combined text and video layout.

block-text-video View Demo

Interactivity

Accordion

Accordion

Collapsible content sections.

block-accordion View Demo
Modal

Modal

Popup dialog windows.

block-modal View Demo
Offcanvas

Offcanvas

Hidden sidebars.

block-offcanvas View Demo
Alert

Alert

Alert messages for user feedback.

block-alert View Demo
Toast

Toast

Notification messages.

block-toast View Demo

Promotional

Features Grid

Features Grid

Grid layout for key features.

block-features-grid View Demo
Features Icon

Features Icon

Icon-based feature display.

block-features-icon View Demo
Features List

Features List

List-style feature presentation.

block-features-list View Demo
Features Table

Features Table

Tabular feature comparison.

block-features-table View Demo
Big Boxes

Big Boxes

Large box display for information.

block-boxes View Demo
Stats

Stats

Display of statistical data.

block-stats View Demo
CTA

CTA

Call-to-action component.

block-cta View Demo
Comparison

Comparison

Side-by-side comparison.

block-comparison View Demo

Social

Quote

Quote

Styled blockquote component.

block-quote View Demo
Testimonials

Testimonials

Display of testimonials or opinions.

block-testimonials View Demo
Team

Team

Showcase of team members.

block-team View Demo