Docs

Articles

Use the articles block to show a group of article cards.
Overview   Stacked Cards   Horizontal Cards   Rich Cards   Minimal Cards   Arguments   Background Type   Heading Type   Input Type   More Type   Styles Type  

Overview  

The articles block renders a group of cards for selected content. By default, the block uses the content of the current section. You can override this by setting input.section to the name of a specific section of your site.

Stacked Cards  

Set orientation to stacked to render the article’s illustration above the card body.

Tutorials
Creating Your First Site With Hinode

Creating Your First Site With Hinode

Set up your Hinode site with version control using npm, GitHub and VS Code.
Optimizing the User Experience

Optimizing the User Experience

Guide on how to optimize the user experience of your site.
Developing Hugo Modules

Developing Hugo Modules

Guide on how to develop Hugo modules compatible with Hinode.
More Blogs  
yml 
- _bookshop_name: articles
  heading:
    title: Tutorials
    align: start
  input:
    section: tutorials
    reverse: false
    sort: date
  hide-empty: false
  header-style: none
  orientation: stacked
  more:
    title: More Blogs
  padding: 0
  limit: 3
  background:
    color: body-tertiary
    subtle: false
  class: border-0 card-zoom card-body-margin
  justify: start

Horizontal Cards  

Set orientation to horizontal to render the article’s illustration before the card body.

Tutorials
Creating Your First Site With Hinode
Optimizing the User Experience
Developing Hugo Modules
More Tutorials  
yml 
- _bookshop_name: articles
  heading:
    title: Tutorials
    align: start
  input:
    section: tutorials
    reverse: false
    sort: date
  hide-empty: false
  header-style: none
  body-style: title
  orientation: horizontal
  more:
    title: More Tutorials
  padding: 3
  limit: 3
  background:
    color: body-tertiary
    subtle: false
  class: card-zoom card-body-margin
  justify: start

Rich Cards  

Adjust the header-style, body-style, and footer-style to refine the card elements being displayed.

Tutorials
Creating Your First Site With Hinode

April 3, 2023 • 13 min read

Creating Your First Site With Hinode

Set up your Hinode site with version control using npm, GitHub and VS Code.

Tutorial • Vscode

Optimizing the User Experience

April 3, 2023 • 11 min read

Optimizing the User Experience

Guide on how to optimize the user experience of your site.

Tutorial • Optimization

Developing Hugo Modules

July 22, 2023 • 12 min read

Developing Hugo Modules

Guide on how to develop Hugo modules compatible with Hinode.

Tutorial • Module • Katex

More Tutorials  
yml 
- _bookshop_name: articles
  heading:
    title: Tutorials
    align: start
  input:
    section: tutorials
    reverse: false
    sort: date
  hide-empty: false
  header-style: publication
  body-style: full
  footer-style: tags
  orientation: stacked
  more:
    title: More Tutorials
  padding: 0
  limit: 3
  background:
    color: body-tertiary
    subtle: false
  class: border-0 card-zoom card-body-margin
  justify: start

Minimal Cards  

Set body-style to minimal to show the title of an article only. The predefined class attribute card-minimal applies an underline effect on hover.

Creating Your First Site With Hinode
Optimizing the User Experience
Developing Hugo Modules
Creating Versioned Documentation
Automating Dependency Updates
Customizing the Appearance of Your Site
yml 
- _bookshop_name: articles
  hide-empty: false
  input:
    section: tutorials
    reverse: false
    sort: date
  more:
    title: More Tutorials
  cols: 5
  padding: 0
  cover: false
  header-style: none
  body-style: minimal
  class: card-minimal

Arguments  

The articles block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Alias for _bookshop_name.
_ordinal int Zero-based position of the bookshop component within the page’s component hierarchy.
animated bool Enables animations.
background background, string Background style of the section.
bento bool Trigger to use a bento-style layout instead of default grid layout.
body_style select full Body components of the element. Supported values: [full, title, minimal, none].
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
cols int 3 Number of grid columns.
cover bool true Flag indicating if the element should be rendered fullscreen.
fluid bool true Flag to set the section container to fluid design, else the section is limited to xxl.
footer_style select none Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
header_style select full Header components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
heading Heading Heading of the content block, including a preheading and content element.
hide_empty bool Hides the entire section when no pages are available.
icon_rounded bool Stack the icon in a round container.
icon_style string Icon style.
id string Unique identifier of the current element.
input Input yes List input of the element. Uses the name of the section to retrieve known pages.
justify select start Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
limit int Maximum number of elements to display.
more More When set for a card group, a button is added if the list exceeds the maximum number of cards to display.
orientation select stacked Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
padding int 3 Padding of the content.
paginate bool Flag indicating if pagination should be added to the element, if the list exceeds the maximum number of containing elements to display.
pagination int Number of elements per page in pagination, overrides site settings.
scroll bool Enables horizontal scrolling of the cards. By default, the card group wraps any cards beyond the amount of defined columns to a new line. When scroll is set to true, a horizontal scroll bar is added instead.
styles []Styles Styles to apply to the individual cards. Supported elements are ratio, orientation, portrait, and width. The styles are rotated when the amount of cards exceeds the available amount of styles.
theme select Color theme to apply to the element. Supported values: [light, dark].
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Name Type Required Default
_bookshop_name string
Alias for _bookshop_name.
_ordinal int
Zero-based position of the bookshop component within the page’s component hierarchy.
animated bool
Enables animations.
background background, string
Background style of the section.
bento bool
Trigger to use a bento-style layout instead of default grid layout.
body_style select full
Body components of the element. Supported values: [full, title, minimal, none].
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
cols int 3
Number of grid columns.
cover bool true
Flag indicating if the element should be rendered fullscreen.
fluid bool true
Flag to set the section container to fluid design, else the section is limited to xxl.
footer_style select none
Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
header_style select full
Header components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
heading Heading
Heading of the content block, including a preheading and content element.
hide_empty bool
Hides the entire section when no pages are available.
icon_rounded bool
Stack the icon in a round container.
icon_style string
Icon style.
id string
Unique identifier of the current element.
input Input yes
List input of the element. Uses the name of the section to retrieve known pages.
justify select start
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
limit int
Maximum number of elements to display.
more More
When set for a card group, a button is added if the list exceeds the maximum number of cards to display.
orientation select stacked
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
padding int 3
Padding of the content.
paginate bool
Flag indicating if pagination should be added to the element, if the list exceeds the maximum number of containing elements to display.
pagination int
Number of elements per page in pagination, overrides site settings.
scroll bool
Enables horizontal scrolling of the cards. By default, the card group wraps any cards beyond the amount of defined columns to a new line. When scroll is set to true, a horizontal scroll bar is added instead.
styles []Styles
Styles to apply to the individual cards. Supported elements are ratio, orientation, portrait, and width. The styles are rotated when the amount of cards exceeds the available amount of styles.
theme select
Color theme to apply to the element. Supported values: [light, dark].
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool Apply subtle theme colors.
Name Type Required Default
backdrop string
Background image with a mask to improve contrast.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool
Apply subtle theme colors.

Heading Type  

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML Section content displayed below the title.
preheading string Preheading of the section heading.
size int 4 Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Name Type Required Default
align select start
Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML
Section content displayed below the title.
preheading string
Preheading of the section heading.
size int 4
Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.

Input Type  

Name Type Required Default Comment
categories string, slice Categories to be used as filter. When set, only pages that belong to at least one of the provided categories are retrieved.
keywords string, slice Keywords to be used as filter. When set, only pages that match at least one of the provided keywords are retrieved.
nested bool If set, retrieves all pages below the section or current page recursively. By default, only first-order children are retrieved.
reverse bool true Sets the sort order to descending.
section string Name of the content section.
sort select yes Key to sort by. Supported values: [date, title, weight].
tags string, slice Tags to be used as filter. When set, only pages that match at least one of the provided tags are retrieved.
Name Type Required Default
categories string, slice
Categories to be used as filter. When set, only pages that belong to at least one of the provided categories are retrieved.
keywords string, slice
Keywords to be used as filter. When set, only pages that match at least one of the provided keywords are retrieved.
nested bool
If set, retrieves all pages below the section or current page recursively. By default, only first-order children are retrieved.
reverse bool true
Sets the sort order to descending.
section string
Name of the content section.
sort select yes
Key to sort by. Supported values: [date, title, weight].
tags string, slice
Tags to be used as filter. When set, only pages that match at least one of the provided tags are retrieved.

More Type  

Name Type Required Default Comment
icon string, uint64 Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
link string, template.URL, url Local page reference or external hyperlink address.
link-type select button Style of the link. Supported values: [button, link].
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
icon string, uint64
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
link string, template.URL, url
Local page reference or external hyperlink address.
link-type select button
Style of the link. Supported values: [button, link].
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.

Styles Type  

Name Type Required Default Comment
orientation select stacked Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
portrait bool Flag to adjust the image ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics.
ratio select Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. When set to auto, the original aspect ratio is used. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9, auto].
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Name Type Required Default
orientation select stacked
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
portrait bool
Flag to adjust the image ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics.
ratio select
Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. When set to auto, the original aspect ratio is used. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9, auto].
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.
On this page