Item Fragment Image Right

Easily right align the item fragment even with an image

Awesome screenshot

Showcasing Syna

Easily left align the item fragment even with an image and buttons at the same time.

Some more text to showcase the description capabilities: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna. Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est. Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis. Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum. Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam. Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus. Nulla tincidunt quis lacus in posuere.

Awesome screenshot

Showcasing Syna

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 110
background = "secondary"
align = "right"

title = "Item Fragment Image Right"
subtitle= "Easily right align the item fragment even with an image"

# Subtitle pre and post item
pre = "Awesome screenshot"
post = "Showcasing Syna"

[asset]
  image = "screenshot.png"
+++

Easily left align the item fragment even with an image and buttons at the same time.

Some more text to showcase the description capabilities:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur a lorem urna.
Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est.
Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis.
Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum.
Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam.
Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
Nulla tincidunt quis lacus in posuere.

Item Fragment Image Only

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 120
background = "secondary"
align = "center"

title = "Item Fragment Image Only"
#subtitle = ""

# Subtitle pre and post item
#pre = ""
#post = ""

[asset]
  image = "screenshot.png"
+++

Item Fragment Image Table Left

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6
Row 1 Value Value Value Button Long Button
Row 2 Value Long Value Long Value

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 130
background = "secondary"
align = "left"

title = "Item Fragment Image Table Left"
#subtitle = ""

# Subtitle pre and post item
#pre = ""
#post = ""

[asset]
  image = "screenshot.png"

[header]
  [[header.values]]
    text = "Header 1"

  [[header.values]]
    text = "Header 2"
    center = true

  [[header.values]]
    text = "Header 3"

  [[header.values]]
    text = "Header 4"

  [[header.values]]
    text = "Header 5"

  [[header.values]]
    text = "Header 6"

[[rows]]
  [[rows.values]]
    header = "Row 1"

  [[rows.values]]
    text = "Value"

  [[rows.values]]
    text = "Value"

  [[rows.values]]
    text = "Value"

  [[rows.values]]
    button = "Button"
    url = "#"
    color = "success"
    center = true

  [[rows.values]]
    button = "Long Button"
    url = "#"
    color = "danger"

[[rows]]
  [[rows.values]]
    header = "Row 2"

  [[rows.values]]
    text = "Value"

  [[rows.values]]
    text = "Long Value"

  [[rows.values]]
    text = "Long Value"

  [[rows.values]]
    text = ""

  [[rows.values]]
    icon = "fas fa-download"
    url = "#"
    center = true
+++

Item Fragment Image Button Left

Choose from a wide variety of highly modular partials to built the site you need.

Some more text to showcase the description capabilities: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna. Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est. Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis. Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum. Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam. Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus. Nulla tincidunt quis lacus in posuere.

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 140
background = "secondary"
align = "left"

title = "Item Fragment Image Button Left"
#subtitle = ""

# Subtitle pre and post item
#pre = ""
#post = ""

[asset]
  image = "screenshot.png"

[[buttons]]
  text = "Button"
  url = "#"
  color = "primary"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "secondary"
+++

Choose from a wide variety of highly modular partials to built the site you need.

Some more text to showcase the description capabilities:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur a lorem urna.
Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est.
Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis.
Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum.
Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam.
Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
Nulla tincidunt quis lacus in posuere.

Item Fragment Image Center

Easily center item fragments even with an image.

Some more text to showcase the description capabilities: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna. Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est. Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis. Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum. Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam. Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus. Nulla tincidunt quis lacus in posuere.

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 145
background = "secondary"
align = "center"

title = "Item Fragment Image Center"
#subtitle= ""

# Subtitle pre and post item
#pre = ""
#post = ""

[asset]
  image = "screenshot.png"
+++


Easily center item fragments even with an image.

Some more text to showcase the description capabilities:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur a lorem urna.
Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est.
Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis.
Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum.
Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam.
Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
Nulla tincidunt quis lacus in posuere.

Item Fragment Button Right

Easily right align the item fragment even with some buttons

Awesome Button

Button Long Button

With a simple subtitle

Also a long description is possible.

Some more text to showcase the description capabilities: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna. Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est. Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis. Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum. Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam. Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus. Nulla tincidunt quis lacus in posuere.

Awesome Button

With a simple subtitle

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 150
background = "secondary"
align = "right"

title = "Item Fragment Button Right"
subtitle= "Easily right align the item fragment even with some buttons"

# Subtitle pre and post item
pre = "Awesome Button"
post = "With a simple subtitle"

[[buttons]]
  text = "Button"
  url = "#"
  color = "primary"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "secondary"
+++

Also a long description is possible.

Some more text to showcase the description capabilities:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur a lorem urna.
Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est.
Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis.
Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum.
Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam.
Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
Nulla tincidunt quis lacus in posuere.

Item Fragment Button Left

Easily left align the item fragment even with some buttons.

Some more text to showcase the description capabilities: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna. Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est. Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis. Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum. Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam. Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus. Nulla tincidunt quis lacus in posuere.

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 160
background = "secondary"
align = "left"

title = "Item Fragment Button Left"
#subtitle = ""

# Subtitle pre and post item
#pre = ""
#post = ""

[[buttons]]
  text = "Button"
  url = "#"
  color = "success"
+++

Easily left align the item fragment even with some buttons.

Some more text to showcase the description capabilities:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur a lorem urna.
Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est.
Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis.
Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum.
Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam.
Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
Nulla tincidunt quis lacus in posuere.

Item Fragment Button Center

Easily center align the item fragment even with some buttons

Also a long description is possible.

Some more text to showcase the description capabilities: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna. Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est. Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis. Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum. Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam. Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus. Nulla tincidunt quis lacus in posuere.

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 170
background = "secondary"
align = "center"

title = "Item Fragment Button Center"
subtitle= "Easily center align the item fragment even with some buttons"

# Subtitle pre and post item
#pre = ""
#post = ""


[[buttons]]
  text = "Long Button"
  url = "#"
  color = "primary"

[[buttons]]
  text = "Button"
  url = "#"
  color = "secondary"
+++

Also a long description is possible.

Some more text to showcase the description capabilities:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur a lorem urna.
Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est.
Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis.
Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum.
Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam.
Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
Nulla tincidunt quis lacus in posuere.

Item Fragment Icon Right

Awesome icon

Using Fontawesome icons

Easily right align item fragments even with an icon.

Some more text to showcase the description capabilities: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna. Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est. Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis. Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum. Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam. Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus. Nulla tincidunt quis lacus in posuere.

Awesome icon

Using Fontawesome icons

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 175
background = "secondary"
align = "right"

title = "Item Fragment Icon Right"
#subtitle = ""

# Subtitle pre and post item
pre = "Awesome icon"
post = "Using Fontawesome icons"

[asset]
  icon = "fas fa-random"
+++

Easily right align item fragments even with an icon.

Some more text to showcase the description capabilities:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur a lorem urna.
Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est.
Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis.
Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum.
Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam.
Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
Nulla tincidunt quis lacus in posuere.

Item Fragment Icon Left

Awesome icon

Using Fontawesome icons

Easily left align item fragments even with an icon.

Some more text to showcase the description capabilities: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna. Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est. Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis. Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum. Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam. Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus. Nulla tincidunt quis lacus in posuere.

Awesome icon

Using Fontawesome icons

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 180
background = "secondary"
align = "left"

title = "Item Fragment Icon Left"
#subtitle = ""

# Subtitle pre and post item
pre = "Awesome icon"
post = "Using Fontawesome icons"

[asset]
  icon = "fas fa-random"
+++

Easily left align item fragments even with an icon.

Some more text to showcase the description capabilities:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur a lorem urna.
Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est.
Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis.
Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum.
Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam.
Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
Nulla tincidunt quis lacus in posuere.

Item Fragment Icon Center

Easily center item fragments even with an icon.

Some more text to showcase the description capabilities: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna. Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est. Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis. Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum. Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam. Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus. Nulla tincidunt quis lacus in posuere.

Code

+++
fragment = "item"
#disabled = false
date = "2017-10-04"
weight = 190
background = "secondary"
align = "center"

title = "Item Fragment Icon Center"
#subtitle = ""

# Subtitle pre and post item
#pre = ""
#post = ""

[asset]
  icon = "fas fa-random"
+++

Easily center item fragments even with an icon.

Some more text to showcase the description capabilities:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur a lorem urna.
Quisque in neque malesuada, sollicitudin nunc porttitor, ornare est.
Praesent ante enim, bibendum sed hendrerit et, iaculis laoreet felis.
Morbi efficitur dui sit amet orci porttitor, nec tincidunt turpis elementum.
Suspendisse rutrum, mi ac sollicitudin blandit, eros sem tincidunt enim, vitae feugiat turpis eros ut diam.
Nunc hendrerit, nibh vitae dignissim pretium, magna nulla lacinia massa, et interdum lacus purus ultricies lacus.
Nulla tincidunt quis lacus in posuere.