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.