NOVA THEME
Block Documentation
Every control, option, and responsive behavior for all blocks in the Nova design system. Each block has a visual reference and a documentation page.
LAYOUT
Grid Block
Columns, gaps, max-widths, responsive spans, background image, overlay
Grid Item Block
Column span, flex mode, backgrounds, borders, link wrapping, responsive reordering
Flex Block
Flexbox direction, wrap, alignment, gap — all responsive across breakpoints
Absolute Box Block
Absolute positioning with responsive offsets, z-index, and mobile-relative toggle
TYPOGRAFY
Heading Block
H1–H6 levels, responsive font size, weight, line height, letter spacing, color
Paragraph Block
Body text with responsive typography, inline bold, italic, and links
List Block
Bullet, numbered, or custom icon lists with item spacing and colors
MEDIA
Image Block
Object-fit, per-corner radius, hover animations, SVG styling, text overlay
Icon Block
CSS-mask recoloring, hover effects, rotation, background, optional text label
Video Block
Self-hosted HTML5 video with poster, autoplay, scroll-triggered play, loop
Video Lightbox Block
Thumbnail or button trigger that opens video in a fullscreen modal overlay
INTERACTIVE
Button Block
Hover states, icon left/right, underline animation, border, responsive padding
Accordion Block
Collapsible sections with toggle icon, item styling, open/closed state controls
Tabs Block
Underline or pill styles, horizontal or vertical, full color customization
Slider Block
Swiper.js carousel with slide/fade/coverflow, autoplay, pagination, arrows
Slider Item Block
Individual slide with flex layout, background image, link wrapping, border
Thumbnail Slider
Dual slider with synchronized thumbnail strip — below, left, or filmstrip
Thumbnail Slider Item
Slide with image, caption, gradient overlay, and thumbnail strip data
Marquee Block
Infinite scrolling ticker with speed presets, direction, gradient edge mask
Marquee Item
Individual marquee item with responsive padding and hover shadow
Before/After Block
Image comparison with horizontal drag, vertical drag, or click-to-toggle
DATA & COMMERCE
Data Table Block
Data-driven table with density modes, zebra stripes, sortable columns
Pricing Card Block
Pricing plan card with optional badge, flex layout, border and shadow
Progress Bar Block
Horizontal bar with scroll-triggered fill animation and overlay text
Timeline Block
5 layouts — center, left-cards, split, split-label, numbered counters
NAVIGATION
Header Block
Full header with dropdown/mega-menu, CTA, scroll effects, mobile menu
Simple Header
Simplified flat navigation with logo, links, CTA, and scroll blur
Advanced Header
Mega-menu header with featured content, custom icons, column dividers
Advanced Header Featured
Featured content panel inside a mega-menu dropdown column
Float Header Block
Floating pill header that transitions on scroll with overlay menu
CONTENT
Blog Listing Block
Dynamic post grid with category filters, pagination, and card styling
Separator Block
Horizontal divider with customizable width, style, and color
FORMS
Contact Form Block
Contact Form 7 with styled inputs, checkboxes, radio cards, and submit
LAYOUT
Grid Block
Columns, gaps, max-widths, responsive spans, background image, overlay
Grid Item Block
Column span, flex mode, backgrounds, borders, link wrapping, responsive reordering
Flex Block
Flexbox direction, wrap, alignment, gap — all responsive across breakpoints
Absolute Box Block
Absolute positioning with responsive offsets, z-index, and mobile-relative toggle
TYPOGRAFY
Heading Block
H1–H6 levels, responsive font size, weight, line height, letter spacing, color
Paragraph Block
Body text with responsive typography, inline bold, italic, and links
List Block
Bullet, numbered, or custom icon lists with item spacing and colors
MEDIA
Image Block
Object-fit, per-corner radius, hover animations, SVG styling, text overlay
Icon Block
CSS-mask recoloring, hover effects, rotation, background, optional text label
Video Block
Self-hosted HTML5 video with poster, autoplay, scroll-triggered play, loop
Video Lightbox Block
Thumbnail or button trigger that opens video in a fullscreen modal overlay
INTERACTIVE
Button Block
Hover states, icon left/right, underline animation, border, responsive padding
Accordion Block
Collapsible sections with toggle icon, item styling, open/closed state controls
Tabs Block
Underline or pill styles, horizontal or vertical, full color customization
Slider Block
Swiper.js carousel with slide/fade/coverflow, autoplay, pagination, arrows
Slider Item Block
Individual slide with flex layout, background image, link wrapping, border
Thumbnail Slider
Dual slider with synchronized thumbnail strip — below, left, or filmstrip
Thumbnail Slider Item
Slide with image, caption, gradient overlay, and thumbnail strip data
Marquee Block
Infinite scrolling ticker with speed presets, direction, gradient edge mask
Marquee Item
Individual marquee item with responsive padding and hover shadow
Before/After Block
Image comparison with horizontal drag, vertical drag, or click-to-toggle
DATA & COMMERCE
Data Table Block
Data-driven table with density modes, zebra stripes, sortable columns
Pricing Card Block
Pricing plan card with optional badge, flex layout, border and shadow
Progress Bar Block
Horizontal bar with scroll-triggered fill animation and overlay text
Timeline Block
5 layouts — center, left-cards, split, split-label, numbered counters
NAVIGATION
Header Block
Full header with dropdown/mega-menu, CTA, scroll effects, mobile menu
Simple Header
Simplified flat navigation with logo, links, CTA, and scroll blur
Advanced Header
Mega-menu header with featured content, custom icons, column dividers
Advanced Header Featured
Featured content panel inside a mega-menu dropdown column
Float Header Block
Floating pill header that transitions on scroll with overlay menu
CONTENT
Blog Listing Block
Dynamic post grid with category filters, pagination, and card styling
Separator Block
Horizontal divider with customizable width, style, and color
FORMS
Contact Form Block
Contact Form 7 with styled inputs, checkboxes, radio cards, and submit