Storage
Basic Plan
10 GB
Pro Plan
100 GB
Srjay - Complete Block Testing Page
This page contains 100+ block instances testing every possible block variant and configuration in the Payload CMS system.
Section 1: Content Block Layouts
Testing all 5 content layout variants.
One Column Layout
This is a single column content block. It takes the full width of the container and is ideal for full-width text content, introductions, or important announcements.
The one column layout is the simplest and most commonly used for long-form content.
Two Columns - Left
This is the left column in a two-column layout. Both columns have equal width (50/50 split).
Two Columns - Right
This is the right column in a two-column layout. Perfect for comparing features or side-by-side content.
Two-Thirds Column (Primary)
This larger column takes two-thirds of the width. Use this for main content while the smaller column can hold supplementary information, CTAs, or navigation.
One-Third (Sidebar)
Smaller sidebar column for secondary content.
Half and Half - Left
Half and half layout provides balanced visual weight. Great for feature comparisons or dual-focus content areas.
Half and Half - Right
This layout works well for product comparisons, before/after scenarios, or dual feature highlights.
Three Column Layout
Column One
First of three equal columns. Ideal for feature grids.
Column Two
Second of three columns. Great for pricing tiers.
Column Three
Third column completes the layout. Perfect for comparison tables.
Media Block - Default Position: Standard centered media display with caption support.
Media Block - Wide Position: Edge-to-edge display for dramatic visual impact.
CTA Block - Buttons Style
This CTA block uses the buttons style with multiple call-to-action links.
"Meet Jay transformed our business with their innovative solutions. The team delivered beyond our expectations."
"Outstanding work! Their attention to detail and technical expertise made all the difference in our project success."
"Simple yet powerful - exactly what we needed for our startup."
Card Grid - Reveal Description
Hover over cards to reveal descriptions.
03
Development
Robust, scalable code that powers your success.
04
Support
24/7 support to keep your systems running smoothly.
Card Grid - Always Visible
Descriptions are always visible.
01
Fast
Lightning-quick performance optimized for modern web.
02
Secure
Enterprise-grade security built into every solution.
03
Scalable
Architecture that grows with your business.
Statement Block with Small Media: Clean, focused visual with minimal media presence.
Small media caption
Statement Block with Medium Media and Colorful Glow: Eye-catching design with vibrant background effect.
Colorful glow effect
Statement Block with Large Media and White Glow: Professional look with subtle white gradient.
Statement Block with Full-Width Media: Maximum visual impact with edge-to-edge imagery.
Statement Block with Code: Perfect for showcasing code snippets alongside explanatory text.
1
// Example TypeScript code
2
interface User {
3
id: string;
4
name: string;
5
email: string;
6
}
7
8
const fetchUser = async (id: string): Promise<User> => {
9
const response = await fetch(`/api/users/${id}`);
10
return response.json();
11
};
Content Grid - Grid Below with Numbers
Numbered grid items displayed below the header content.
01
Step 1Discovery Phase
Understanding your requirements and goals.
02
Step 2Planning Phase
Creating detailed project roadmaps.
03
Step 3Design Phase
Crafting beautiful user interfaces.
04
Step 4Development Phase
Building robust solutions.
05
Step 5Testing Phase
Ensuring quality and reliability.
06
Step 6Launch Phase
Deploying to production.
Content Grid - Side by Side
Content displayed in a side-by-side layout.
Feature A
Description of feature A.
Feature B
Description of feature B.
Feature C
Description of feature C.
Feature D
Description of feature D.
Hover Cards - With Background
Interactive cards with hover effects and visible background.
Hover Cards - No Background
Cleaner look with hidden background.
Logo Grid - With Link
Showcase your partners, clients, or technologies.
Logo Grid - No Link
Simple logo display without CTA.
Media Content - Content First, Stretch
Content positioned on the left with stretched media on the right. This layout is great for feature highlights.
Media Content - Media First, Fit
Media on the left with content on the right. The media fits its natural dimensions.
Our Process
How We Deliver Excellence
Our Process
How We Deliver Excellence
Technologies
Our Tech Stack
Technologies
Our Tech Stack
Starter
999
Perfect for small projects and startups.
- Up to 5 pages
- Basic SEO
- Mobile responsive
- Custom integrations
- Priority support
Professional
2,999
Ideal for growing businesses.
- Up to 20 pages
- Advanced SEO
- Mobile responsive
- Custom integrations
- Priority support
Enterprise
9,999
For large-scale projects.
- Unlimited pages
- Enterprise SEO
- Mobile responsive
- Custom integrations
- Dedicated support
Prices shown are starting prices. Final cost depends on project requirements.
Advanced
Custom Quote
Complex web applications.
- Full-stack development
- API integrations
- Custom features
Slider Block - Client Testimonials
What our clients say about working with us.
“The collaboration was seamless from start to finish. They understood our vision and brought it to life beautifully.”
David Park, Founder, Startup Labs
Step 1
Step 1: Initial Consultation
We begin with a free consultation to understand your project requirements, timeline, and budget.
Step 2
Step 2: Proposal & Planning
Our team creates a detailed proposal with scope, timeline, and cost estimates.
Step 3
Step 3: Design & Development
We design and develop your solution with regular check-ins and progress updates.
Step 4
Step 4: Testing & Launch
Rigorous testing ensures quality before we deploy your solution to production.
Step 5
Step 5: Ongoing Support
We provide continued maintenance and support to ensure long-term success.
Code Feature ‑ Light Background
Showcase your code alongside explanatory content. This example shows the content-first layout.
1
interface ApiResponse<T> {
2
data: T;
3
status: number;
4
message: string;
5
}
6
7
async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
8
const response = await fetch(url);
9
const data = await response.json();
10
return {
11
data,
12
status: response.status,
13
message: 'Success'
14
};
15
}
16
Code Feature ‑ Dark Background
Dark mode code display with code-first layout. Perfect for technical documentation.
React Hook
1
import { useState, useEffect } from 'react';
2
3
export function useApi<T>(url: string) {
4
const [data, setData] = useState<T | null>(null);
5
const [loading, setLoading] = useState(true);
6
const [error, setError] = useState<Error | null>(null);
7
8
useEffect(() => {
9
fetch(url)
10
.then(res => res.json())
11
.then(setData)
12
.catch(setError)
13
.finally(() => setLoading(false));
14
}, [url]);
15
16
return { data, loading, error };
17
}
18
Sticky Highlight 1: Code Example
This highlight showcases a code snippet that stays visible as you scroll.
Learn More
1
const config = {
2
api: {
3
baseUrl: process.env.API_URL,
4
timeout: 5000,
5
},
6
features: {
7
darkMode: true,
8
analytics: true,
9
},
10
};
11
Sticky Highlight 2: Media Example
This highlight displays media content in the sticky sidebar.
Sticky Highlight 3: Another Code
Multiple highlights create an interactive scrolling experience.
1
// Authentication middleware
2
export const authMiddleware = (req, res, next) => {
3
const token = req.headers.authorization;
4
if (!token) {
5
return res.status(401).json({ error: 'Unauthorized' });
6
}
7
// Verify token...
8
next();
9
};
10
Comparison Table - Default Style
Compare features across different options.
| Features | Basic Plan | Pro Plan |
|---|---|---|
| Storage | 10 GB | 100 GB |
| Users | 5 | Unlimited |
| Support | Included | Included |
| Analytics | N/A | Included |
| API Access | N/A | Included |
| Custom Domain | N/A | Included |
Users
Basic Plan
5
Pro Plan
Unlimited
Support
Basic Plan
Included
Pro Plan
Included
Analytics
Basic Plan
N/A
Pro Plan
Included
API Access
Basic Plan
N/A
Pro Plan
Included
Custom Domain
Basic Plan
N/A
Pro Plan
Included
Comparison Table - Centered Style
Centered layout for better visual balance.
| Feature Comparison | Self-Hosted | Cloud |
|---|---|---|
| Setup Time | 1-2 hours | 5 minutes |
| Maintenance | Manual | Automatic |
| Scalability | Included | Included |
| Data Control | Full | Limited |
Setup Time
Self-Hosted
1-2 hours
Cloud
5 minutes
Maintenance
Self-Hosted
Manual
Cloud
Automatic
Scalability
Self-Hosted
Included
Cloud
Included
Data Control
Self-Hosted
Full
Cloud
Limited
Form Block - Contact Form
Embedded form for collecting user submissions.
Content with Inline Links
Check out our services page for more information about what we offer.
You can also contact us directly for a custom quote.
Get Started with Our CLI
Install our tools and start building today.
That's All 100+ Blocks!
This page demonstrates the full power of our Payload CMS block system. Ready to build something amazing?