Item

Showcase your projects, features and more

Item fragment can be used to display a lot of different formats of data. It supports a button, image, table and icon.

Item fragment has support for image resource fallthrough.

Item fragment - Image aligned right
Item fragment - Image aligned only
Item fragment - Image with table aligned left
Item fragment - Image with button aligned left
Item fragment - Image aligned center
Item fragment - Button aligned right
Item fragment - Button aligned left
Item fragment - Button aligned center
Item fragment - Icon aligned right
Item fragment - Icon aligned left
Item fragment - Icon aligned center

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.

Button Long Button

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

Button Long 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

Button

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.

Button

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

Long Button Button

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.

Long Button Button

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.

Documentation

Variables

Content

type: string
Default Hugo variable. Defined simply by entering it’s value under the frontmatter section.

This variable is optional.

align

type: string
accepted values: right, center, left
default: center

Defines the layout of the fragment.

pre

type: string

The value shown before the sidebar content. This variable is optional.

post

type: string

The value shown after the sidebar content. This variable is optional.

buttons

type: array of objects

Buttons can be defined using the same variables as buttons fragment.

If an asset is defined or the fragment is centered, buttons are displayed in the main section of the fragment. If not, they’re displayed in the siderbar.

This variable is optional.

asset

type: asset object

Either an image or an icon. The asset is displayed in the sidebar unless the fragment is centered.

header, rows (table fragment)

type: table object

A table can be added to the item fragment using the same variables as the table fragment. Please read more about tables in the table fragment’s docs.

Global variables are documented as well and have been omitted from this page.

Further Resources

Syna Theme

Highly customizable open source theme for Hugo based static websites