Content Patterns Toolkit
Reusable layout and styling examples for building pages. Copy patterns below and apply classes as needed.
Buttons
Use these for calls to action. Solid buttons are best for primary actions. Outline buttons are better for secondary or less prominent links.
- Solid Blue Button
- Solid Orange Button
- Solid Gold Button
- Solid Green Button
- Modern Gold Button
- Modern Blue Button
- Modern Safety Blue Button
- Modern Canary Button
- Modern Star City Blue Button
- Modern Sunset Button
Image + Text Layout
Use .left-img or .right-img on images to wrap text around them. Works best with 1–2 paragraphs per image.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Curabitur non risus nec nisi pharetra dignissim. Donec ut tortor vitae justo fermentum cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Curabitur non risus nec nisi pharetra dignissim. Donec ut tortor vitae justo fermentum cursus.
Suspendisse potenti. Mauris feugiat, eros eget tincidunt posuere, erat libero commodo nisl.
Aliquam erat volutpat. Integer interdum, sem id ullamcorper cursus, lacus enim aliquet lorem.
Suspendisse potenti. Mauris feugiat, eros eget tincidunt posuere, erat libero commodo nisl.
Aliquam erat volutpat. Integer interdum, sem id ullamcorper cursus, lacus enim aliquet lorem.
Suspendisse potenti. Mauris feugiat, eros eget tincidunt posuere, erat libero commodo nisl.
Aliquam erat volutpat. Integer interdum, sem id ullamcorper cursus, lacus enim aliquet lorem.
Suspendisse potenti. Mauris feugiat, eros eget tincidunt posuere, erat libero commodo nisl.
Aliquam erat volutpat. Integer interdum, sem id ullamcorper cursus, lacus enim aliquet lorem.
Aliquam erat volutpat. Integer interdum, sem id ullamcorper cursus, lacus enim aliquet lorem.
Color Boxes
Use these to highlight content or group related information. Headings and links automatically adjust for readability.
Tip: Add .gold-slash or .blue-slash to headings for emphasis.
-
Legacy Blue Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
-
Legacy Yellow Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
-
Blue Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
-
Safety Blue Box
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi.
-
Gold Box
Phasellus ultrices nulla quis nibh. Quisque a lectus.
-
Coopers Gray Box
Integer vulputate sem a nibh rutrum consequat.
-
Canary Box
Pellentesque fermentum dolor. Aliquam quam lectus.
-
Star City Blue Box
Sed feugiat. Cum sociis natoque penatibus et magnis dis parturient montes.
-
Sunset Box
Integer vulputate sem a nibh rutrum consequat.
Staggered Content List
Use for steps, highlights, or grouped information. Alternates background for readability.
-
First Item
Lorem ipsum dolor sit amet.
-
Second Item
Proin porttitor, orci nec nonummy molestie.
-
Third Item
Praesent dapibus, neque id cursus faucibus.
-
Fourth Item
Phasellus ultrices nulla quis nibh.
Accordion
Use to organize longer content into expandable sections.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Praesent dapibus, neque id cursus faucibus.
-
Donec consectetuer ligula vulputate sem tristique cursus.