--- name: block-list url: /block-list title: Block List ---

Block List

A useful list component that can accommodate a variety of styles and controls.


List title

Basic HTML

You can create a block list with this basic HTML

List title
List title

Advanced HTML

You can create advanced versions of block lists that include form elements and icons with this HTML.

I'm a Checkbox
I Have Radio Buttons
Look, I gotta Switch
  • Switch!
I Hold Forms
I Even Have Selectboxes
I'm a Checkbox
I Have Radio Buttons
Look, I gotta Switch
  • Switch!
I Hold Forms
I Even Have Selectboxes

Sass Mixins

Use our Sass mixins to define your own markup structure for a block list.

// This is the block list container .custom-block-list { // This gets you basic styles @include block-list-container( $font-size: 1rem, // Base font size for entire list $full-bleed: true // If true, negative margins are added on the left and right to push the list to the edge of the container ); // This adds support for text fields, dropdowns, and radio/check inputs @include block-list-inputs( $color: #000, // Foreground color $background, #fff, // Background color $background-hover: #fff, // Background color of elements on hover $padding: 1rem, // ); // This adds support for icons &.with-icons { @include block-list-icons( $size: 0.8, // This should be a decimal point. 0.8 makes the icon 80% the size of its parent $item-selector: 'li' // This should be whatever tag or class your block list uses for items ); } // Define what tag or class your list items are with this mixin li { @include block-list-item( $color: #000, // Color of items $color-hover, // Color of items on hover $color-disabled, // Color of items when disabled $background: transparent, // Background color $background-hover: #ccc, // Background color on hover $border: 1px solid #ccc, // Top and bottom border of items $padding: 1rem ); // Add styles for list items with chevrons &.with-chevron { @include block-list-chevron( $color: #000, // Color of chevron $padding: 1rem, // Insert the same padding as the block list item here $label-class: 'block-list-label' // Insert the class you're using for labels ); } } // Define what tag or class your headers are with this mixin header { @include block-list-header( $color: #000, // Text color $font-size: 1rem, // Font size $uppercase: true, // If true, the text becomes all-caps $offset: 1rem // Left-side offset for text ); } // Define the class for labels .block-list-label { @include block-list-label( $color: #999, // Color of label $left-class: 'left', // Define a modifier class for left-aligned labels $left-padding: 1rem // Padding to add when a label is left-aligned ); } }

Sass Variables

You can customize block lists with these settings variables.