The Codex
Below is a sampling of what your Codex will look like. This is how we combat Design Drift. All your elements, pre-styled, in a single place. Now, you don’t have to stare at a blank screen for too long.
Icon Pods
Navigate to Patterns and select Icon Pods. This is a templated pattern that can be edited directly in the Block Editor.
This block utilizes Font Awesome icons. At the top of each pod, there is an HTML block where you can copy/paste a Font Awesome icon code. Our site primarily uses Thin icons from Font Awesome. If Duotone is selected, a color will be automatically applied.
Bubbles
A common component on this site is the “rounded edge block with a background color.” All you need to do to create this is to create a Group, add a Background Color, and add 2 levels of padding.
If you want there to be a border and dropshadow, In the Styles section of the Block settings, select Box. The sample below has Box selected.
Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here. Some basic text right here.
Monopoly Cards
This is an individual element, best used inside of a Grid block (using Grid will force each card to be the same height). Monopoly Cards are a simple Pattern in the library. They are customizable using the WP Block Editor. To change the color of the header, select the Paragraph inside of the Stack, and edit it’s Background Color like you normally would in the Block Editor.
Depending on what you want the cards to do on mobile, you’ll want to add the appropriate CSS class from the Add-on CSS classes list below.
Finished a rebrand
You just finished working with an amazing agency who took your new message and gave your brand aesthetic a needed lift.
Finished a rebrand
You just finished working with an amazing agency who took your new message and gave your brand aesthetic a needed lift.
Finished a rebrand
You just finished working with an amazing agency who took your new message and gave your brand aesthetic a needed lift.
Double Header
Use the standard Header block and select H2. Push SHIFT+ENTER where you want the line break to be. On the lower line, highlight the text and BOLD and ITALICIZE it.
Here is the big header
This is the small
Heading with an icon
We have redefined a single style for headings. Use the standard Heading block. In the Styles section of the Block settings, select Bolt.
Heading with Bolt
Pre-heading text
Use the standard Paragraph block. In the Styles section of the Block settings, select Above Header. Below this block, use a standard Heading block (the margins will automatically be adjusted).
Pre-heading text
Standard heading
Custom bullets
We have pre-defined a couple different styles for bullet points using Font Awesome. Use the standard List block (not Numbered). Once you’ve typed out your list, make sure the parent-level List block is selected. In the Styles section of the Block settings, select one of the options:
Checks
Right Arrow
Add-on CSS classes
ccc-hanger
Apply this to the last Group within a Group to have it hang over the bottom edge slightly.
ccc-mobile-horizontal-scroll
Used mostly on Grid blocks, this will force all the cards in the grid to scroll horizontally on a mobile device.
Let’s build a Codex for your site
Every company starts at a different place. On our call, we’ll get a handle on what stage you are currently in and what makes sense for your next best step.
Sometimes that’s growing your current website. Other times, it is building a new site to be the foundation for your marketing efforts. I’ll get a handle on what drives ROI for you and walk you through what it would look like to work with us.
By the end, you’ll have items to take back to your team to implement and know whether or not we’re the right fit.