Color Blocks

Color blocks lay out content in a visual grid. A color block can contain any HTML, including Foundation rows and columns, and has an optional background using any of the NC State brand colors.

When to use color blocks

Use color blocks to add visual interest to a page with lots of content, such as the Libraries Student Employee Hub or Welcome to the Libraries.

When not to use color blocks

Color blocks are not appropriate for highly utilitarian pages where a user needs to get information as quickly as possible to complete an important coursework or research task, such as a page walking a student through an important assignment.

Usage

Color blocks may contain any HTML elements, and the first component inside the color block should be a heading at the appropriate level. Each group of color blocks should be wrapped in a <div="color-blocks"> element, and each color block is represented by a <div="color-block"> element.

The width and color of the block are determined by additional class names, so <div class="color-block half bio-indigo"> represents a color block with a solid bio-indigo background that spans half the width of the container.

Layout

A color block can span the full width of its container, two-thirds the width, half the width, or one third the width. The color blocks will lay themselves out in order across and down the page according to the width of each block, and will move to a new row once the current row is full.

If the layout looks strange or broken, there's most likely an issue with the order of your block widths. For example, a group of three blocks where block 1 is half width, block 2 is two-thirds width, and block 3 is half width won't look right.

Color

Color blocks have an optional solid background, which can be any NC State brand color. If no color class name is given, there will be no background.

Examples

• HTML
• SCSS