Callouts

What are callouts?

Call outs allow you to create a section on a page that has items with an icon, title, subtitle, description and a link. You can use them to promote features or links to important pages in your site and create a landing page.

View the example landing page

Create a callout data file

Create a data file following the below format. The style is for classes to set the background colour and sizes you would like to use of the Bulma hero container for the callouts.

You can set the height of the callouts in the data file, such as is-small, is-medium or is-large. If unset it will be is-medium by default.

The items have 6 fields, but only the title and subtitle are required. If the icon is a brand icon, such as GitHub in the below example, set icon_brand: true.

style: is-light
height: is-medium
items:
  - title: Conference Deadline
    # subtitle: Example subtitle 1
    icon: fa-calendar
    description: >
      This is the conference deadline summary created by our team
      
      Please feel free to save and use:
    call_to_action_name: Deadline
    call_to_action_link: https://luna-xue.github.io/conf-track.html
  - title: Techniques Summary
    # subtitle: Example subtitle 2
    icon: fa-pencil-square-o
    description: >
      Our team summarize interesting topics

      Please check:
    call_to_action_name: Topics
    call_to_action_link: /page-2/
  - title: GitHub Projects
    # subtitle: Example subtitle 3
    icon: fa-github
    icon_brand: true
    description: >
      We also record our progress using GitHub

      Please check if you are interested in:
    call_to_action_name: View Github
    call_to_action_link: https://github.com/WINGS-UHM/Web/

Set the callouts in the frontmatter

To display the callouts on your page, add a callouts property in the front matter and set it to the name of your data file without the extension.

layout: page
title: Example Landing Page
subtitle: This is an example landing page
callouts: example_callouts