Layout
Asymmetric Feature Section
A feature section with an intentionally broken grid, overlapping elements, and bold type.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create an asymmetric feature section. Use a broken grid where a large headline overlaps a feature image, a body text column sits off-center, and a small stat block floats in an unexpected position. Use a light background, high-contrast dark text, and a single accent color. Avoid symmetry. Use Tailwind CSS grid and absolute positioning. Placeholders can be colored blocks.
Chinese Prompt
创建一个非对称功能区域。使用破格网格：大标题与功能图片重叠，正文列偏离中心，小型数据块浮在意外位置。使用浅色背景、高对比深色文字和单一强调色。避免对称。使用 Tailwind CSS grid 和 absolute positioning。占位符可用彩色块。
Overview
A layout that breaks the 12-column grid to create visual tension and editorial personality.
Features
- Broken/asymmetric grid
- Overlapping headline and image
- Off-center body text
- Floating stat block
- Single accent color
- Placeholder image blocks
Usage
Use for brand storytelling, product features, or magazine-style landing pages.
Customization
Modify the prompt to:
- Add parallax offsets between layers
- Use a dark background inversion
- Add a pull quote overlapping the image
- Make the layout responsive with stacked order