Turbo UI
Full width blocks
Inner blocks
Layouts
Hero layout
Full screen layout
Split layout
Paper with 1 column
Paper with 2 columns
Sidebar layout
Full-page grid
Horizontal container
Scroll container
Background
Card
CSS Elems

Hero layout

<div class="t1 t1-start"> <div class="t1 bg-cover bg-center" style="background-image:url(/assets/owen-wen-yzqlka7jnug-unsplash-s.jpg?o1-cache=1);"> <div class="t1 w-full flex flex-col bg-c-black-50 min-h-500"> <div class="t1 flex-none flex flex-center"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 b-1-dashed-current color-blue bg-c-blue-500-20 rounded-4 text-center p-8">top</div> </div> </div> <div class="t1 flex-1 flex flex-center"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 b-1-dashed-current color-blue bg-c-blue-500-20 rounded-4 text-center p-8">center</div> </div> </div> <div class="t1 flex-none flex flex-center"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 b-1-dashed-current color-blue bg-c-blue-500-20 rounded-4 text-center p-8">bottom</div> </div> </div> </div> </div> </div>
<div class="t1 t1-start"> <div class="t1 bg-center bg-c-blue"> <div class="t1 w-full flex flex-col min-h-500"> <div class="t1 flex-none flex flex-center"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 b-1-dashed-current color-white bg-c-white-20 rounded-4 text-center p-8">top</div> </div> </div> <div class="t1 flex-1 flex flex-center"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 b-1-dashed-current color-white bg-c-white-20 rounded-4 text-center p-8">center</div> </div> </div> <div class="t1 flex-none flex flex-center"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 b-1-dashed-current color-white bg-c-white-20 rounded-4 text-center p-8">bottom</div> </div> </div> </div> </div> </div>
<div class="t1 t1-start"> <div class="t1 bg-center bg-c-white"> <div class="t1 w-full flex flex-col min-h-500"> <div class="t1 flex-none flex flex-center"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 b-1-dashed-current bg-c-gray-50 color-gray-500 rounded-4 text-center p-8">top</div> </div> </div> <div class="t1 flex-1 flex flex-center"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 b-1-dashed-current bg-c-gray-50 color-gray-500 rounded-4 text-center p-8">center</div> </div> </div> <div class="t1 flex-none flex flex-center"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 b-1-dashed-current bg-c-gray-50 color-gray-500 rounded-4 text-center p-8">bottom</div> </div> </div> </div> </div> </div>