Vue Layout System

# Showcase

Here's a collection of examples demonstrating a variety of layouts created with Vue Layout System. Without writing a single line of CSS, you can efficiently arrange and align elements with the layout components, precisely controlling spacing with the spacing system.

# Hero Banner

LayoutAbsolute LayoutList LayoutListInline

Vue Layout System
Vue components that solve daily layout problems
Consistent
·
Predictable
·
Stable
||

# Cards in Columns

LayoutColumn LayoutFlexColumn LayoutList LayoutAlign

card 1
Amet nulla facilisi morbi tempus iaculis urna
card 2
Pellentesque adipiscing commodo elit at imperdiet
card 3
Mauris augue neque gravida in fermentum et sollicitudin
card 4
Ultrices neque ornare aenean euismod elementum
card 5
Ac turpis egestas integer eget aliquet nibh praesent
card 6
Ac ut consequat semper viverra
card 7
In ornare quam viverra orci
card 8
Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae
||

# Horizontal Cards In Columns

LayoutColumn LayoutFlexRow LayoutList

card 1
description
card 2
description
card 3
description
card 4
description
card 5
description
card 6
description
card 7
description
card 8
description
card 9
description
card 10
description
card 11
description
card 12
description
||

# Horizontal Cards List

LayoutFlexRow LayoutFlexColumn LayoutList LayoutListInline LayoutAbsolute

Best Choice
Hot
New
Refundable
card 1
Placerat vestibulum lectus mauris ultrices eros in cursus. Ultrices neque ornare aenean euismod elementum
★
★
★
★
☆
4.0
(10k+)
20% off
$300
$240
Best Choice
Hot
New
Refundable
card 2
Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Netus et malesuada fames ac turpis egestas sed tempus
★
★
★
★
☆
4.0
(10k+)
20% off
$300
$240
Best Choice
Hot
New
Refundable
card 3
Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras
★
★
★
★
☆
4.0
(10k+)
20% off
$300
$240
||

LayoutFlexColumn LayoutAlign

Terms and conditions
  1. Volutpat blandit aliquam etiam erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus iaculis urna id volutpat lacus laoreet non
  2. Ultrices neque ornare aenean euismod elementum. Nec feugiat nisl pretium fusce id velit. Volutpat blandit aliquam etiam erat
  3. Placerat vestibulum lectus mauris ultrices eros in cursus. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Malesuada bibendum arcu vitae elementum curabitur vitae nunc
  4. Enim ut tellus elementum sagittis vitae et leo duis. Elementum integer enim neque volutpat ac tincidunt vitae. Risus sed vulputate odio ut enim blandit
  5. Ac turpis egestas integer eget aliquet nibh praesent. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Enim ut tellus elementum sagittis vitae et leo duis
  6. Placerat vestibulum lectus mauris ultrices eros in cursus. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget
  7. Amet nulla facilisi morbi tempus iaculis urna. Sagittis nisl rhoncus mattis rhoncus urna neque. Rhoncus urna neque viverra justo nec ultrices
  8. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Eget nunc lobortis mattis aliquam faucibus purus. Venenatis urna cursus eget nunc scelerisque viverra mauris
  9. Netus et malesuada fames ac turpis egestas sed tempus. Tempus iaculis urna id volutpat lacus laoreet non. Urna condimentum mattis pellentesque id nibh
  10. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Egestas purus viverra accumsan in. In iaculis nunc sed augue lacus viverra vitae congue
||

# Form

LayoutColumn LayoutList LayoutListInline

field 1 In vitae turpis massa sed elementum tempus egestas sed sed
field 2 Placerat vestibulum lectus mauris ultrices eros in cursus
field 3 Id nibh tortor id aliquet lectus proin nibh nisl condimentum
field 4 Posuere lorem ipsum dolor sit amet
field 5 Cursus metus aliquam eleifend mi in nulla posuere
select Placerat vestibulum lectus mauris ultrices eros in cursus
date In iaculis nunc sed augue lacus viverra vitae congue
time In ornare quam viverra orci
radio
Nunc scelerisque viverra mauris in aliquam sem
checkbox
Egestas purus viverra accumsan in
range Malesuada pellentesque elit eget gravida cum sociis natoque penatibus et
color Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum
||

# Blog

LayoutGrid LayoutList LayoutFlexColumn

Cras pulvinar mattis nunc sed blandit. Sem integer vitae justo eget. Venenatis urna cursus eget nunc scelerisque viverra mauris. In vitae turpis massa sed elementum tempus egestas sed sed. In fermentum posuere urna nec tincidunt praesent...
Platea dictumst quisque sagittis purus sit. Accumsan lacus vel facilisis volutpat. Volutpat blandit aliquam etiam erat. At lectus urna duis convallis convallis tellus. Rhoncus urna neque viverra justo nec ultrices...
Rhoncus urna neque viverra justo nec ultrices. Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Volutpat blandit aliquam etiam erat. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat...
Cursus metus aliquam eleifend mi in nulla posuere. Ultrices neque ornare aenean euismod elementum. Egestas purus viverra accumsan in. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Adipiscing enim eu turpis egestas pretium aenean pharetra magna...
Malesuada pellentesque elit eget gravida cum sociis natoque penatibus et. Eget sit amet tellus cras adipiscing enim eu turpis. Fames ac turpis egestas integer eget aliquet. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Diam vulputate ut pharetra sit amet...
Categories
Comments
Links
Advertisement
About me
||