Twig Components

A collection of UI components for building easily web interfaces.

Structure

Grid

Basic grid layout system for organizing content.

block-grid View Demo

Header

Page header component with navigation options.

block-header View Demo

Footer

Page footer component with various layouts.

block-footer View Demo

Tabs

Tabbed content interface, with horizontal and vertical layout.

block-tabs View Demo

Content

Hero

Eye-catching hero section for landing pages.

block-hero View Demo

Steps

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

block-steps View Demo

Timeline

Chronological event display with configurable alignment.

block-timeline View Demo

Table

Data table component with styling options.

block-table View Demo

Title

Customizable title component.

block-title View Demo

Box

Simple box container for content.

block-box View Demo

Card

Card component for content display.

block-card View Demo

Card Grid

Grid layout for multiple cards.

block-card-grid View Demo

Media

Image

Enhanced image display component.

block-image View Demo

Image Grid

Grid layout for image galleries.

block-image-grid View Demo

Video

Video player component.

block-video View Demo

Video Grid

Grid layout for multiple videos.

block-video-grid View Demo

Text Image

Combined text and image layout.

block-text-image View Demo

Text Video

Combined text and video layout.

block-text-video View Demo

Interactivity

Accordion

Collapsible content sections.

block-accordion View Demo

Modal

Popup dialog windows.

block-modal View Demo

Offcanvas

Hidden sidebars.

block-offcanvas View Demo

Alert

Alert messages for user feedback.

block-alert View Demo

Toast

Notification messages.

block-toast View Demo

Scrollspy

Navigation aid that highlights content sections as users scroll through the page.

block-scrollspy View Demo

Promotional

Features Grid

Grid layout for key features.

block-features-grid View Demo

Features Icon

Icon-based feature display.

block-features-icon View Demo

Features List

List-style feature presentation.

block-features-list View Demo

Features Table

Tabular feature comparison.

block-features-table View Demo

Big Boxes

Large box display for information.

block-boxes View Demo

Stats

Display of statistical data.

block-stats View Demo

CTA

Call-to-action component.

block-cta View Demo

Comparison

Side-by-side comparison.

block-comparison View Demo

Social

Quote

Styled blockquote component.

block-quote View Demo

Testimonials

Display of testimonials or opinions.

block-testimonials View Demo

Team

Showcase of team members.

block-team View Demo