Docs

Articles

7 min read • 1,478 words
Share via

Use the articles content block to show a group of article cards.

Overview   Arguments   Background Type   Heading Type   Input Type   More Type  

  Important

Content blocks are a new feature that is still in beta  . The implementation is subject to change. The documentation on this website is still being worked on.

Overview  

The articles content block renders a group of article cards.

Guides
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.

Customizing the Appearance of Your Site

Customizing the Appearance of Your Site

Guide on how to use custom layouts to change the appearance of the homepage, single pages, and list pages.

More Guides
yml 
- _bookshop_name: articles
  heading:
    title: Guides
    align: start
  input:
    section: guides
    reverse: true
    sort: title
  hide-empty: false
  header-style: none
  more:
    title: More Guides
  padding: 0
  max: 3
  class: border-0 card-zoom card-body-margin

Arguments  

The content block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Unique name of the bookshop component.
background background, string Background style of the section.
bento bool Trigger to use a bento-style layout instead of default grid layout.
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. Supported values: [1 - 5].
cover bool true Flag indicating if the element should be rendered fullscreen.
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 yes Hides the entire section when no pages are available.
input Input yes List input of the element. Uses the name of the section to retrieve known pages.
justify select center Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
max int Maximum number of elements to display. Supported values: >=1.
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. Supported values: [0 - 5].
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. Supported values: >=1.
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.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].
Name Type Required Default
_bookshop_name string
Unique name of the bookshop component.
background background, string
Background style of the section.
bento bool
Trigger to use a bento-style layout instead of default grid layout.
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. Supported values: [1 - 5].
cover bool true
Flag indicating if the element should be rendered fullscreen.
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 yes
Hides the entire section when no pages are available.
input Input yes
List input of the element. Uses the name of the section to retrieve known pages.
justify select center
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
max int
Maximum number of elements to display. Supported values: >=1.
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. Supported values: [0 - 5].
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. Supported values: >=1.
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.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
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.
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. Supported values: [1 - 6].
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. Supported values: [1 - 12].
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. Supported values: [1 - 6].
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. Supported values: [1 - 12].

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 childs 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 childs 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
link string, template.URL, url Local page reference or external hyperlink address.
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
link string, template.URL, url
Local page reference or external hyperlink address.
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.
On this page: