Hero 123 - Hero Dua Kolom dengan Panel Gambar Tersisip

Hero 123 adalah blok hero dua kolom dengan desain kalem, dilengkapi label monospace, judul besar, teks pendukung, tombol CTA berbentuk pil, dan gambar di dalam bingkai bulat berwarna primer.

Hero123 adalah hero dua kolom yang dibangun dengan shadcn/ui, dengan teks di kiri dan foto tinggi di kanan di dalam bidang primer dengan bantalan dalam dan sudut membulat. Tumpukan teks menggunakan garis kategori monospace, judul dengan ukuran ekstra besar, paragraf pendukung, dan satu tombol utama berbentuk pil. Kolom kanan didominasi oleh gambar dengan rasio aspek yang ditempatkan di jendela bulat kecil di atas panel primer solid, sehingga foto terlihat seperti mockup perangkat atau kartu. Tipografi tetap tajam dengan latar belakang bagian yang kalem dan bantalan vertikal yang luas. Ini adalah tata letak pemasaran dua kolom yang sederhana dengan satu gambar dan satu aksi. Kompleksitasnya moderat dan mudah digunakan kembali dengan mengganti gambar dan teks placeholder. Pada layar besar, grid memberikan jarak lebar antar kolom; pada lebar lebih kecil, tumpukan menjaga urutan baca yaitu teks terlebih dahulu, lalu gambar.

UI Kit & Library

• shadcn/ui
• Tailwind CSS
• React
• Astro
• Next
• Figma

Data Komponen

ID

hero123

Akses

pro

Dibuat

16 Desember 2024

Tipe

blok