Components Guide
Documentation for all the components used across this website.
This is meant to contain and demonstrate the component items which make up this website design. It is intended for use in an atomic design system, making it easier to see it all at a glance and more easily make changes to it.
Cards
News Cards
Static News Card
Used for: Articles on the News page. The first version is the most up to date and currently used (2023).
News Card - Hover Style
Used for: Articles on the News page. Deprecated as of 2023.
Basic Cards
Used for: Simple informational or fact cards. Available in Hover-animated and static styles.
300+ Communitarians and counting.
300+ Communitarians and counting.
Heading
Hero sections
Hero with video background
Used for: The hero section across most pages. As of 2023, the background video is always one of the ink drop videos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet.
Content sections
Image-Text Blocks
Used for: Any text-baesd content section. Includes image-left and image-right variations.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text Blocks - Intro Text
Used for: Specifically the first section of a page beneath the hero section. Only available in light variation.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text Blocks
Used for: Any text-based content section. Section title is on the left 1/4 (3col), content in right 3/4 (9col). Can be used without a headline by simply leaving that field blank, and the paragraph copy will remain in the 3/4 position of the grid. Available in light and dark variations.
Lorem ipsum
Lorem ipsum dolor sit amet.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Nav Bar
Used for: The navigation bar for the entire website. It's very simple, designed mobile-first, so it simply reduces or expands in size to fit any screen.
Nav Bar - Open menu
Used for: The menu that opens from the nav bar.
Footer
Used for: The footer element across the entire site. Starts with a Pre-Footer which contains real-time clocks showing the times in each city where we have an office. Below is the primary footer information containing our pages, copyright line, social icons, and legal links.
Case Studies
Case Study - Hero Section
Used for: The hero sections of case studies. Can display a short, silent looping video or static image background, depending on what is set in the CMS. Both have the slight darkening filter.
Hero headline
Client Name
Case Study - Intro Section
Used for: The very first section of a case study. Contains the primary information of a project (Campaign Name, Client, Date (Opt.), and Tags) and an introductory Rich Text Block. Only availabile in light variant.
Campaign or Project Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Case Study - Text Block
Used for: The text content of case studies. Rich text block. Includes an optional title field but does not show tags or other information such as in the intro text block. Only comes in light variation.
Section Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Case Study - Video Block
Used for: Showing a single, prominent video. Usually used at the top, after the intro, to display the campaign's primary TV Spot or Case Study video.
Case Study - Image Gallery
Used for: Showing a set of images. Usually used for static campaign images such as static work, documentation, behind the scenes, etc.
Case Study - Statement
Used for: A large quote about the work or campaign. Usually a client quote but can be internal, or from a news article.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo.
Case Study - Results
Used for: Displaying statistics about a campaign's performance. Things like views, engagement statistics, financial impact, brand perception statistics, etc.
Results
750k
Views
1m
Impressions
32%
Increase in brand perception
2x
Customer conversions
Case Study - Next/Prev cards
Used for: Navigating between case studies. Appears always at the bottom of every Case Study detail page.
