Info Bullets

Description

The information and bullets component (info bullets) is a fairly specialized component that desplays a two column layout. On the left side is a content field, occupied either by checkmarks, set in a data file, or html/copy. To the right is an 'info-card' molecule, which is populated by bullet points, set in a data file, or html/copy.

In most cases, this component requires the use of a data file to work properly. See `src/_data/info-bullets.yml` for an example of the data structure -- ideally, add new datasets there, also.

Sample Two Columns w/ Checkmarks

Rendered


This is a header

This is a subheader. Bibendum Amet Inceptos Tristique.

  • Speed

    Customize the CPU and RAM allocated to each one of your jobs so that your workflows are never slowed down by inadequate provisioning.

  • Flexibility

    Build, spin-up and execute on any Docker image, use any language that runs on Linux or macOS, and enable advanced job orchestration using workflows.

  • Efficiency

    Cache dependencies, Docker layers and more using CircleCI’s advanced caching strategies to save time when running multiple jobs across a number of projects.

  • Control

    Automatically adopt user permissions from your GitHub org, execute CI/CD jobs at the branch level, and protect sensitive secrets using environment variables and contexts.


Sample Two Columns w/o Checkmarks

Rendered


This is a header

This is a subheader. Bibendum Amet Inceptos Tristique.

This is the main content of the section, to be formatted as desired. Html characters can be placed here, supporting a variety of content.

Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Options

classes : string

header : string

subheader : string

tag : string
An important variable, tag is the filter value that grabs the proper information from the data file, which should be configured with a corresponding tag name. See `src/_data/info-bullets.yml` to see data format. Required for this component to work properly.

main-content : string | HTML Entity
This variable takes a string or html input and renders it in the left column. It is mutually exclusive to the green checkmarks that might be shown in its stead. DO NOT set this if rendering green checkmarks in the left section is desired.

lede : string
A blue lede tag, placed in the righthand card. Required for rendering blue bullets (default bullets).

lede_title : string
Requires `lede` to be set.

box-content : string | HTML Entity
An alternative to the default blue checkmarks, box-content can be set as HTML or copy, and replaces the default bullets section.

note : string
A note that goes below the green bullets, if active. Requires green bullets be set in the corresponding data file.

green_lede : string
A green lede tag. Requires green bullets to be set in the data file.


Sample Two Columns w/ Checkmarks

Code


{% assign icons = site.data.en.icons.home-two-col %} {% include components/info-bullets.html header="This is a header" tag='github-landing' subheader="This is a subheader. Bibendum Amet Inceptos Tristique." lede="This is a lede" lede_title="This is a lede title" green_lede="green lede" note="This is a card note, here." %}

Rendered


This is a header

This is a subheader. Bibendum Amet Inceptos Tristique.

  • Speed

    Customize the CPU and RAM allocated to each one of your jobs so that your workflows are never slowed down by inadequate provisioning.

  • Flexibility

    Build, spin-up and execute on any Docker image, use any language that runs on Linux or macOS, and enable advanced job orchestration using workflows.

  • Efficiency

    Cache dependencies, Docker layers and more using CircleCI’s advanced caching strategies to save time when running multiple jobs across a number of projects.

  • Control

    Automatically adopt user permissions from your GitHub org, execute CI/CD jobs at the branch level, and protect sensitive secrets using environment variables and contexts.


Sample Two Columns w/o Checkmarks

Code


{% assign icons = site.data.en.icons.home-two-col %} {% capture content %} This is the main content of the section, to be formatted as desired. Html characters can be placed here, supporting a variety of content.

Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. {% endcapture %} {% include components/info-bullets.html header="This is a header" tag='github-landing' subheader="This is a subheader. Bibendum Amet Inceptos Tristique." main-content=content lede="This is a lede" lede_title="This is a lede title" green_lede="green lede" note="This is a card note, here." %}

Rendered


This is a header

This is a subheader. Bibendum Amet Inceptos Tristique.

This is the main content of the section, to be formatted as desired. Html characters can be placed here, supporting a variety of content.

Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.