_Style Guide

This is the Classic City core style guide. All available blocks are listed below.

Elements

Call to Action

This is a completely custom block. There is a custom post type (hiding underneath the Posts dropdown menu) called CTA. Write out the fields in ACF. Then, drag the Call to Action block on a page and select the post you want to use.

Our Deliverable

Your Audit Document

I wanted to give you a quick glimpse into the audit document our team has been preparing. We have 50+ questions we want to go over with you and your vendors to ensure you know what your systems are capable of and can therefore make wise decisions on the order in which you should tackle your three primary areas in 2023.

View Your Doc

Card Text

Custom block. This is a repeater block that allows you to populate cards with text and a button on them.

Sub-header

Header

Schedule a Call

Sub-header

Header

Schedule a Call

Container with Overlap

This is a custom block that allows you to drag other blocks inside of it. The content will always be “contained” inside of it, even though the color background spans the full-width. You can choose a color as well as a position (top or bottom). Please keep in mind what content you place at the top/bottom. Whatever block is “hanging” should have a solid color background to ensure legability.

Here is a header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac feugiat ante. Nullam blandit sagittis massa ac maximus. Curabitur massa nisi, laoreet ut molestie in, ullamcorper ac augue. Mauris non elit nisl. Nulla eu risus augue. Ut euismod elit augue, sit amet sagittis leo tincidunt sed. Proin commodo sit amet libero sed ultricies. Aenean eget tempus lacus, non pretium sem.

Cras in feugiat ex. Morbi efficitur nisi non quam placerat, sit amet auctor turpis ultricies. Suspendisse et lorem ut eros facilisis hendrerit ac eget elit. Sed facilisis sem non interdum malesuada. Morbi eget odio tincidunt, placerat lectus vitae, porttitor urna. Suspendisse non dapibus nisi. Praesent sodales nisl quis urna porta molestie. Aliquam nunc quam, malesuada vitae nisi nec, varius ultrices purus. Integer lacinia, arcu non sollicitudin molestie, metus enim fringilla tellus, rutrum maximus lectus felis non ex. Praesent posuere condimentum urna, vitae viverra augue viverra quis. Phasellus aliquam dui odio, id posuere risus ultrices molestie. Nam eget dui vel orci cursus pharetra sed sit amet lectus. Aenean viverra ultricies quam in sagittis. Maecenas consequat ante non mauris tincidunt, at convallis neque vulputate.

Our Deliverable

Your Audit Document

View Your Doc

Fifty Fifty Block

Custom block that allows you to drag Gutenberg blocks inside of it. You have two default options:

Arrangement: Left or Right (which side the image is on
Image: Upload the image you would like to be on the side

You can then place content on the opposite side. Make sure you upload an image that is the appropriate ratio. This block should be used with the Full Width setting, however, the backend of Gutenberg doesn’t like some of the spacing. I’d recommend editing it in Normal width, and when done, making it Full Width.

Sub-title

Title of Section

Praesent pellentesque risus non ultrices pulvinar. Praesent est lorem, mattis sit amet condimentum sit amet, euismod quis ipsum. Integer auctor faucibus eros, sit amet aliquam ipsum egestas nec. Quisque neque felis, posuere eget scelerisque ac, tempus quis massa. Curabitur sit amet hendrerit felis. Donec et lectus a nunc ornare laoreet eu vel magna. Cras rhoncus cursus mi sed condimentum. In at lacus leo. Aenean condimentum quam in elit mattis, eu ultricies ante ultrices. Sed vestibulum bibendum justo, at malesuada risus facilisis sit amet.

Nam a vestibulum arcu. Proin tincidunt ac libero a dictum. Sed aliquet nulla quis faucibus efficitur. Nullam eu varius dui. Vestibulum rhoncus nulla in sodales consectetur. Nam egestas faucibus volutpat. Nunc et justo laoreet nisl maximus malesuada. Ut lorem augue, maximus vel metus sed, luctus varius est. Ut feugiat tristique luctus. Aliquam hendrerit nulla augue, id rutrum leo condimentum sed.

Icon Background

Custom block. There are two core fields:

Columns: The quantity of columns it should output
Color: The background color of each page (recommended: White)

There is a repeater field that allows you to input:

Label: The title of the pod
Icon: Font Awesome HTML snippet (use version 5.x and the Solid style)
Description: Paragraph description (can accept HTML)
Link (optional): Page to link to. Please use a link on ALL rows or NONE of the rows. The sample will show why you should not mix them.

Here is a Label

ksadj fklsad fskajd fkajd fk;ljd fkasljdf sald fasm,ndf asj,df askuidjf as;ikofj as;kdfj ask;dfj ak;dfjas k;dfja dfi;uas di;fuasv df;iuasd fi;asj dfkasj dfsamdnf asm,ndf asmdh fasik;dfu as;idfh asjldf asmdfnasm,dfna sljdf asi;duf asi;dfh asljdf asjldnf aslmndf m,adn fasdh filajdh f

Here is a Label

Our Team

Here is a Label

asd

Double Header

Custom Block

Add Block by typing /double and click on Double Header. Click the edit button and fill in the fields.

Small Header

Large Header

User Pod

Custom Block

Drag the User Pod block within a column. This block pulls custom ACF data from the User’s actual profile (Photos 1 -4) as well as the custom “avatar” field which should be a transparent PNG.

Chris LaFay

CEO

Chris’s goal in life is to conduct connection and bring heart to every interaction in life. He puts humans above to-dos. He consistently brings the band back together, leveraging long-term relationships across a swathe of experience to empower career transitions, life event pivots, and, ultimately, an incredibly versatile, flexible, and creative team for his clients.

Dawn Audano

Operations

Dawn Audano connects the dots, a committed minimalist who strips projects down to their most essential—and therefore, efficient—elements. She makes space for creatives to engage meaningfully with the task at hand, cutting to the heart of the matter. With experience in radio, film, event planning, and motherhood, she expertly juggles the details and enjoys handling the tiny pieces that can make or break the flow of ideas.

Daniel Cowan

Lead Developer

Daniel Cowan removes obstacles, “unsticks what’s stuck.” Like electrical conduction, he finds the points of resistance and removes anything impeding momentum. He enjoys trouble-shooting for folks that felt like things were moving and then, suddenly, they weren’t. When opportunity struck, he and his family traveled the country by RV for over 12 months, more deeply connecting with each other and with the world around them.

Oversized Icon

HTML Gutenberg Blocks

Add a block by typing /oversized and select Oversized Icon. This is just an HTML block that has a Font Awesome icon in it. Leave the containing DIV tag there, but swap out the <i> tag with a FontAwesome Duotone icon.

Image Text

Thin Icon Pods

Custom Block

Add a new block by typing /thin and select Thin Icon Pods. This will accept a FontAwesome HTML icon, Title, Description, and Link URL. Ignore the Columns field for now, but keep it to two or three items per repeater.

ahsdjsd jahsd jags dhas dkajs dkahjs dhaj sd

hausdbah sdaisudas duags djahsdk asdjhg asjd

wbeuhrwhje rjwhe rwhe rwie rwe rkwe rjwhe jr hjwe

Tabs

Custom Block

Type in /Tab and select Tabs. You can then fill out all fields to have a tabbed browsing experience. You should have an H2 above this section for hierarchical purposes.

This is the SEO Title

as k fed fkdsj faked fog reiuwoeurqiw dasd and a,sd amnsd a dags dfiey foul aosuf aos aos da doa kdasj fewjg wir ewifh asnf msdnf asmd ,asj fweoug wog asjfd asnf sdfj woeg oeuf asf a,sda,d wgreog askdf aksd

Go Here Now

Website Development

ie ker kj lej rq fald af mxnc vmxnc bdih periywoe rqw daksf mnsv cmxv badly eir wie rast ach das vs, d vadpfweougr ekgj kj.asm ca.s dpeif woug skjd ms clajkdf skjd

Another One

Color Callouts

Gutenberg Blocks

This can be customized quite a lot. This is just a simple Group with a background color. Block name is Color Callout.

Small Callout Text

Header #2 In Callout

Remember. You can make either of the headlines a Paragraph or a Header. If you want to use a Paragraph but make it look like an H2, just add. the CSS class h2. (The other header-based CSS classes can be implied). If you need to remove the top margin, just add the CSS class has-topper. Some simple paragraph text that goes in this callout section as well. Here is some more basic, simpajsdle text that will go in this callout. Some simple paragraph text that goes in this callout section as well. Here is some more basic, simple text that will go in this callout.

Use Small Buttons Most of The Time

Simple Columns

Gutenberg Blocks

Add Block by typing /Simple and select Simple Columns. This is formatted for an Image, H3, Paragraph and Button. Make sure all the images you upload are the same ratio.

Here is some text for this section

lass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sollicitudin eleifend condimentum. Sed sollicitudin condimentum posuere. Donec non justo eu lacus suscipit suscipit et at magna.

Here is a small button

Here is some text for this section

Here is a small button

Here is some text for this section

Here is a small button

List With Line

Gutenberg Lists (it’s also included in some custom blocks/page templates as well)

Attach the CSS class ccc-list-line to the core Gutenberg’s Bulleted List block. If you link the whole list item, a cool animation will happen

With Links

Bold This First Line
Push shift-enter once you’re done typing in the BOLDed text to keep this text within the bullet
Pushed Enter and Bolded
Shift-enter again to type in more text below this really cool bold header

Without Links

Bold First Line
Push shift-enter once you’re done typing in the BOLDed text to keep this text within the bullet
Pushed Enter and Bolded
Shift-enter again to type in more text below

Small Description

Bold This First Line
Push shift-enter once you’re done typing in the BOLDed text to keep this text within the bullet
Pushed Enter and Bolded
Shift-enter again to type in more text below

Steps Rows Split

Custom Block

Add Block by typing /step and then chose Steps-Rows-Split. Click Add Row and fill out Fields.

This is the small header

This is the Big Header

This is the description for the main step. This is the description for the main step. This is the description for the main step. This is the description for the main step. This is the description for the main step.