Content Styles

Photoblock

Block with left and right sections, highly customizable with a mix-and-match style. The basic format is below.

From here you can add in classes to give it more style.

Class options for the container are: thinborder border blue/navy/red/gold/blood/gray.
Class options for the photoblock -left and -right are: image blue/navy/red/gold/blood/gray.
If adding text in one of the photoblocks, put it in a div with a class="text". Image class is used to style the block holding an img tag

The image can be in the left or right or both blocks, both blocks could be text or neither. Styles can even be stacked on top of each other for the container. For example thinborder border blue is perfectly acceptable CSS, but it might not be stylistically appropriate.

Below is an example with a thinborder applied to the container, an image on the left, and text on the right.

text here

The code for the above looks like this:

A fully styled example of the photoblock with a testimonial quote might look like this:

“Full text of the pull quote goes here."

— First Last '22

Watch Video

The code for the above looks like this:

There is also a full-width version of the photoblock that applies a patterned background to the entire block for when you don't want to break it up into a left and right half.

It's a less-defined block style where you'll need to use a lot of your own styling choices.

“I am boxer, hear me roar.”

— Boxer

The code for the above looks like this:

Yellow Caption Block

Block with left image and right quote text that applies a yellow bar along the left side. The basic format is below.

“I am boxer, hear me roar.”

— Boxer

Fancy Pull Quote

A block with a truncated yellow line on the left and a border around the outside. Used for when there is a rather large block of text to go with an image. The image will need to be formatted to your liking manually and can be floated left or right. Just make sure the padding is correct.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis lacus ac auctor finibus. Sed tortor dolor, pharetra mattis ligula id, ultricies mattis neque. Proin at lacinia libero, eget commodo purus. Nulla ac malesuada mauris. Pellentesque tincidunt, risus sed elementum aliquam, quam risus accumsan nulla, et tincidunt magna nisl in ipsum. Duis iaculis ante eu leo lacinia sollicitudin. Curabitur gravida congue blandit. Pellentesque et pretium elit. Curabitur porta sem nisl, consequat facilisis eros ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis lacus ac auctor finibus. Sed tortor dolor, pharetra mattis ligula id, ultricies mattis neque. Proin at lacinia libero, eget commodo purus. Nulla ac malesuada mauris. Pellentesque tincidunt, risus sed elementum aliquam, quam risus accumsan nulla, et tincidunt magna nisl in ipsum. Duis iaculis ante eu leo lacinia sollicitudin. Curabitur gravida congue blandit. Pellentesque et pretium elit. Curabitur porta sem nisl, consequat facilisis eros ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis lacus ac auctor finibus. Sed tortor dolor, pharetra mattis ligula id, ultricies mattis neque. Proin at lacinia libero, eget commodo purus. Nulla ac malesuada mauris. Pellentesque tincidunt, risus sed elementum aliquam, quam risus accumsan nulla, et tincidunt magna nisl in ipsum. Duis iaculis ante eu leo lacinia sollicitudin. Curabitur gravida congue blandit. Pellentesque et pretium elit. Curabitur porta sem nisl, consequat facilisis eros ullamcorper.

The code for the above looks like this: