Pattern library
Active filters:
none
- 12-column grid that never breaks
- Classes for using the 12-column grid with no breakpoints
- 12-column grid
- Classes for using the 12-column grid
- adding bottom margin (deprecated)
- adds bottom margin to an element
- adding bottom margin
- adds bottom margin to an element
- adding top margin
- adds top margin to an element
- blue background
- Gives an element a consistent blue background.
- box corners
- Creates a box with angles in the corners
- centered elements
- Creates a centered element on the page
- colors
- Our predefined color pallete
- container
- Creates a centered, fluid element with max-width of 1400px;
- cropping images to a circle
- Cropping square and thumbnail images to a circle
- grey background with top border
- Gives an element a consistent grey background with a nice top border
- grey background
- Gives an element a consistent grey background.
- half yellow background
- Gives an element a half-width yellow background from the right side.
- half
- Creates half width columns.
- hiding images on mobile
- Hides images for small screens
- image with caption
- Default styles for figures and figcaptions
- indented lists without bullets or numbers
- Gives extra indentation to no-bullet lists
- layout and grid
- Examples for simple page layouts
- lists with headings
- Creates an ordered list with numbers the same size as the headings
- lists without bullets or numbers
- Creates a list without bullets or numbers
- multi-color background
- Gives an element a consistent a background with the CEHD logo repeated.
- partial blue background
- Gives an element a partial blue background from the right side.
- positioning images
- Best practices for positioning images on a page
- removing top margin
- removes top margin to an element
- row
- Creates a fluid 100% width element.
- sub headings
- Sub headings with smaller text
- third yellow background
- Gives an element a third-width yellow background from the right side.
- third
- Creates one-third width columns.
- two-third yellow background
- Gives an element a two third-width yellow background from the right side.
- two third
- Creates one-third width columns.
- vertically aligning headings with images
- Removing the top margin from a heading so it aligns with the top of a heading
- wrapping blockquotes with fancy quotes
- Puts curly quotes around a block quote
- yellow background
- Gives an element a consistent yellow background.
- a tag
- Default styles for a tags
- Courses
- Pulls in courses from the Course tool
- dl tag
- Default styles for definition lists
- em tag
- Default styles for italic text
- Events feeds
- Pulls in a list of people from the People Tool by tag
- fonts
- Default text size and margins
- headings
- Default heading styles and associated css classes
- News feed
- Pulls in a news feed from any Wordpress RSS feed
- p tag
- Default styles for paragraphs
- small text
- Smaller font size
- strong tag
- Default styles for bold text
- tables
- Default styles for tables
- plus symbol SVG
- SVG plus symbol graphic
- WPLC Background
- WPLC background image
- CSS loader macro
- Creates a nice spinning loader while feeds load
- Events macro (deprecated)
- Pulls in a list of people from the People Tool by tag
- Google Analytics event tracking macro
- Hooks custom events into Google Analytics
- Info sessions macro
- Pulls in a list of info sessions
- News feed macro (deprecated)
- Pulls in a news feed from any Wordpress RSS feed
- People by tag
- Pulls in a list of people from the People Tool by tag
- Person by internet ID
- Pulls in a person using their internet ID (X500)
- Table macro
- Simplifies creating accessible tables
- column divider
- A vertical divider between columns
- hero image page
- Code sample for a page with a hero image
- page layout
- Basic components for laying out a page.
- did you know SVG with a one-half blue background
- Creates an inline SVG for "Did you know?" with a one half blue background from the right
- did you know SVG with a one-third blue background
- Creates an inline SVG for "Did you know?" with a one third blue background from the right
- did you know SVG with a two-third blue background
- Creates an inline SVG for "Did you know?" with a one two third blue background from the right
- did you know SVG with blue background
- Creates an inline SVG for "Did you know?" with a blue background
- did you know SVG with grey background
- Creates an inline SVG for "Did you know?" with a grey background
- did you know SVG with yellow background
- Creates an inline SVG for "Did you know?"
- did you know SVG
- Creates an inline SVG for "Did you know?"
- centered text
- Center justifies text.
- left text
- Left justifies text.
- plain text
- An override class to return text to the default weight and size
- pull quote
- Gives text the proper size and padding for a pull quote.
- red text
- Gives text a red color
- right text
- Right justifies text.
- uppercase text
- Changes text to all uppercase