Blocks on Hinode

About

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The about content block renders a short message next to an illustration. You can add optional links or buttons below the message.

Image First

Set order to first to show the illustration before the heading.

Preheading

Approach

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The approach block renders a featured image with one or more steps.

Preheading

Heading

Approach content. It supports multiple lines.

First Step

Articles

Mon, 01 Jan 0001 00:00:00 +0000

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.

Cards

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The cards content block renders a group of content cards. You can define the card’s content, including an illustration, using frontmatter inputs.

Stacked Cards With an Image

Set the image attribute of each element to an image asset to render illustrated cards.

Preheading

Contact form

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The contact-form content block renders a contact form powered by a form provider of your choice. Provide a render hook and action to link your custom form and callback action to the content block.

Netlify Contact Form

Netlify Forms provides serverless form handling, allowing you to manage forms without extra API calls or additional JavaScript. You can enable form detection by including a data-netlify or netlify attribute.

CTA

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Default Message

The cta content block renders a call to action message with a button. By default, the cta uses a generic title and message.

Interested in This Topic?

Please leave your contact details so we can get in touch.

Get in touch

yml

- _bookshop_name: cta
 background:
 color: body-tertiary
 subtle: false
 links:
 - title: Get in touch
 url: '#!'
 icon: chevron-right

Custom Message

Set the heading attribute to override the default message title and content.

FAQ

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The FAQ content block renders an accordion of frequently asked questions. Clicking on a question reveals the answer interactively.

Preheading

Heading

Section content. It supports multiple lines.

First item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur nulla at tortor mattis pharetra.

Second item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis sit amet nulla sit amet efficitur.

Third item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam lobortis, sodales dolor eu, posuere elit.

yml

- _bookshop_name: faq
 heading:
 preheading: Preheading
 title: Heading
 content: >-
 Section content. It supports multiple lines.
 background:
 color: body-tertiary
 subtle: false
 items:
 - title: First item
 description: |-
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
 efficitur nulla at tortor mattis pharetra.
 - title: Second item
 description: >-
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis
 sit amet nulla sit amet efficitur.
 - title: Third item
 description: >-
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam
 lobortis, sodales dolor eu, posuere elit.

Arguments

The content block supports the following arguments:

Featured

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Featured Article

Set the url of a link to include a button that redirects to a content page.

Preheading

Heading

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The heading content block renders a section heading with optional regular content.

Preheading

Section Heading

Regular content that is placed below the title.

yml

- _bookshop_name: heading
 heading:
 preheading: Preheading
 title: Section heading
 content: Regular content that is placed below the title.
 width: 8
 justify: center

Arguments

The content block supports the following arguments:

Hero

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Basic Hero

The hero content block renders a page hero, typically at the top of the page. Set cover to true to display a full-page hero.

Title

Hero content

yml

- _bookshop_name: hero
 heading:
 title: Title
 align: start
 content: Hero content
 width: 12

Illustrated Hero

You can include an illustration next to the hero heading. Specify orientation and order to configure the illustration’s placement. You can set cover to true to display a full-height hero. In horizontal layout, the image fills the width remaining next to the header (in sizes 1 to 12).

List

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The list block renders a list of articles.

Default List

Title	Description
Fourth Post	This is the fourth blog post. It is excluded from the search index.
Third Post	This is the third blog post. It uses exact case for the title.
Second Post	This is the second blog post.
First Post	This is the first blog post.

Filtered List

Add the following configuration to your page’s frontmatter to enable data table features:

Panels

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The panels content block displays multiple panels that are toggled by a tab control.

Tabs

Set tab-type to tabs to adjust the panel controls.

Preheading

Heading

Panels content. It supports multiple lines.

Content of the first panel.

Content of the second panel.

Content of the third panel.

yml

- _bookshop_name: panels
 heading:
 preheading: Preheading
 title: Heading
 content: Panels content. It supports multiple lines.
 align: start
 background:
 color: body-tertiary
 subtle: false
 width: 12
 tab_type: tabs
 ratio: 1x1
 elements:
 - title: First Panel
 image: /img/placeholder.png
 content: Content of the first panel.
 - title: Second Panel
 image: /img/placeholder.png
 content: Content of the second panel.
 - title: Third Panel
 image: /img/placeholder.png
 content: Content of the third panel.

Pills

Set tab-type to pills to adjust the panel controls.

Preview

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Basic Preview

The preview content block renders a live URL preview in an iframe with device switcher controls. By default, it displays in desktop view.

Hugo on Wikipedia

Live preview of the Hugo static site generator Wikipedia page

yml

- _bookshop_name: preview
 heading:
 title: Hugo on Wikipedia
 content: Live preview of the Hugo static site generator Wikipedia page
 url: "https://en.wikipedia.org/wiki/Hugo_(software)"

Preview With Specific Device

Set the device argument to specify which device view to display by default. Options are desktop, tablet, or mobile.

Releases

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The releases content block displays a timeline with release information.

Preheading

Heading

Content

Product launch

July 1, 2023

Separator

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The separator content block renders a section separator. The separator spans the entire page from edge to edge on smaller devices. On larger screens, the separator is bound by the maximum container width that contains the section.

Line Separator

The default separator renders a horizontal line.

yml

- _bookshop_name: separator

Clear Separator

Set the argument clear: true to render a clear separator.

Team

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The team content block renders a group of team members.

Team

Alex Smith

Testimonials

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The testimonials content block renders one or more client testimonials. You can render them as a carousel or as columns.

Carousel

Set carousel to true to render a carousel of multiple testimonials.

First testimonial.

Second testimonial.

Third testimonial.

yml

- _bookshop_name: testimonials
 card:
 color: body-tertiary
 subtle: false
 cols: 1
 icon_style: fa-4x text-secondary
 carousel: true
 testimonials:
 - icon: linkedin
 content: First testimonial.
 link: #!
 - icon: google
 content: Second testimonial.
 link: #!
 - icon: github
 content: Third testimonial.
 link: #!

Columns

Set cols to 3 to render three testimonials as columns.

Video message

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The video-message content block renders a video with optional messages displayed either horizontally or stacked below the video.

Horizontal Layout

Set orientation to horizontal to display the messages to the right of the video.

Preheading

Blocks on Hinode

About

Overview

Image First

Approach

Overview

Articles

Overview

Stacked Cards

Cards

Overview

Stacked Cards With an Image

Contact form

Overview

Netlify Contact Form

CTA

Overview

Default Message

Custom Message

FAQ

Overview

Arguments

Featured

Overview

Featured Article

Heading

Overview

Arguments

Hero

Overview

Basic Hero

Illustrated Hero

List

Overview

Default List

Filtered List

Menu

Overview

Grid Layout

Masonry Layout

Panels

Overview

Tabs

Pills

Preview

Overview

Basic Preview

Preview With Specific Device

Releases

Overview

Separator

Overview

Line Separator

Clear Separator

Team

Overview

Testimonials

Overview

Carousel

Columns

Video message

Overview

Horizontal Layout