On this Page:
What is a CSS Class?
CSS stands for Cascading Style Sheets. It’s the web design standard way to control how things are displayed. Luckily for you, you don’t have to know how to write CSS. Our theme and the block editor take care of that for you. In certain circumstances you might want to display a particular block differently than it normally would be displayed. To accommodate that, Web Services creates CSS classes: predefined rules for displaying web elements.
How to Apply an Advanced CSS Class
To achieve the effect listed, open the “Advanced” tab in the block editing sidebar, and type the class name into the “Additional CSS Class(es)” field.
CSS Classes you can use at K
For any block:
Class: pad-left
Effect: Adds a 2 “em” padding (white space) to left
Class: pad-right
Effect: Adds a 2 “em” padding (white space) to right
Class: shadow
Effect: displays drop-shadow around the block
Note: see textshadow for headings
Class: smush
Effect: reduces space between letters.
Note: Use sparingly when you really need something to fit. Not intended for large blocks of text.
Class: border
Effect: displays narrow light grey border around the block
For any block that does not provide a color-palette chooser (e.g. Heading):
Class: black
Effect: Turns all the text in the block black
Class: orange
Effect: Turns all the text in the block brandK orange
Note: For accessibility, the text must be at least 14 point (typically 18.66px) and bold; or 18 point (typically 24px) or larger.
Class: dark-gray
Effect: Turns all the text in the block dark-gray
Class: red
Effect: Turns all the text in the block brandK red
Class: aqua
Effect: Turns all the text in the block brandK aqua
Class: green
Effect: Turns all the text in the block brandK green
Class: purple
Effect: Turns all the text in the block brandK purple
Heading block:
Class: caps
Effect: Displays the heading in all capital letters.
Note: Type in mixed-case then apply this class for better universal experience than typing in all caps.
Class: textshadow
Effect: displays subtle drop shadow around letters
Class: clearnone
Effect: Prevents the header from taking up all the horizontal space; allows other blocks (e.g. images) to float up next to the heading instead of starting below the heading.
Paragraph block:
Class: justify
Effect: Fully-justifies text within the block
Class: clearfix
Applies to: Paragraphs that have left or right alignment
Effect: Prevents text that follows the aligned block from wrapping around it
Image block:
Class: clearfix
Applies to: images that have left or right alignment
Effect: Prevents text that follows the aligned block from wrapping around it
Class: honeycomb-overlay
Effect: Adds a subtle honeycomb graphic over the lower left section of the image
Cover IMAGE block:
Class: shortblock
Effect: Reduces minimum height of the block to 2/3 of the default
Class: honeycomb-overlay
Effect: Adds a subtle honeycomb graphic over the lower left section of the image
Columns block:
Class: hasmargin-wide
Effect: Adds a 3 “em” margin to columns
Class: hasmargin-narrow
Effect: Adds a .5 “em” margin to columns
List block:
Class: nobullet OR hidebullet
Effect: Suppresses bullets
Class: nomargin
Effect: Removes left margin from (un-indents) list
Class: upper-roman
Effect: replaces numbers with uppercase roman numerals. Indented sublists follow outline A., 1., a., i.
Class: upper-alpha
Effect: replaces numbers with uppercase alphabet. Indented sublists follow outline 1., a., i.
Class: lower-alpha
Effect: replaces numbers with lower-case alphabet. Indented sublist is lower-case roman
Class: lower-roman
Effect: replaces numbers with lower-case roman numerals.
Class: checklist
Effect: replaces bullet with open square
Container block
Class: Wave
Applies to: Containers that have a background color and are preceded and followed by areas with the default white background
Effect: Distorts upper and lower edges into wavy lines.
Table block
Class: grid
Effect: light grey grid outline around cells