Meta facebook tracking pixel

Standard Headings

Use <h1> through <h6> elements to insert headings into text. Headings are scaled down slightly on small screens; the heights indicated below are for standard desktop displays.

Heading 1 – 400 Lato 32px #015a84 (reserved for page titles)

Heading 2 – 400 Lato 26px #015a84

Heading 3 – 700 Lato 22px #555555

Heading 4 – 400 Lato 18px #555555

Heading 5 – 400 Lato 16px #777777
Heading 6 – 400 Lato 16px #777777

Small Heading Segments

Inserting a <small> element into a header will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.

h1. Small segment header.

h2. Small segment header.

h3. Small segment header.

h4. Small segment header.

h5. Small segment header.
h6. Small segment header.

Paragraphs

This is a paragraph set in 16px Lato with a line-height of 1.4, a bottom margin of 16px and a hex color value of #333333.

Wrap <strong> around type to make it bold! You can also use <em> to italicize your words. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Links insdie paragraphs are very standard, and the color is preset to the primary color.


Horizontal Rules

Use the <hr> tag to create visual separation between sections:


Lists

Unordered lists

  • Apples
    • Crab Apples
    • Candy Apples
    • Adam’s Apples
  • Oranges
  • Peaches

Ordered lists

  1. Royalty
    1. Kings
    2. Queens
    3. Knaves
  2. Nobility
  3. Peasantry

Definition lists

Definition lists are styled to look like <h3> headings with paragraphs of text below.

Lorem ipsum
Dolor sit amet, consectetur adipisicing 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.
Consectetur adipisicing
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.

Title Lists

For easy scanning when listing things with titles, such as workshops, press releases, etc. Give the <ul> or <ol> a class of "title_list" and an element within the <li> a class of "title", and that element will be big and beautiful, like these blog posts:


Blockquotes

Sometimes other people say smart things, and you may want to mention that through a blockquote callout. Just use the <blockquote> tag with a nested <cite> tag for attribution.

Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov

Primary Colors

  • #015a84
  • #008cc8
  • #E5EEF2

Secondary Colors

  • #85c659
  • #daebc1

Accent Colors

  • #fb8733

Grays

  • #333333
  • #555555
  • #999999
  • #CCCCCC
  • #EEEEEE

Editorial

General

CancerCare follows the AP Stylebook

  • Use a.m. and p.m.
  • lists of three, four or more items should not use a comma before the penultimate item (also known as the serial, or Oxford, comma) unless its absence introduces ambiguity.
  • Use &ndash; for the en-dash, which is used without spaces to show ranges (e.g. Nov. 12–13) and with spaces to demarcate parenthetical thoughts – thoughts like this one – with typographic exactitude.
  • Quotation marks go “outside of links”.
  • When possible, use typographically correct quotation marks (“ and ”), not primes (").
  • When title-casing in Spanish, the words “en”, “el”, “de”, “los/las” and “a” should be lowercase, but other words like “Para” (for in English) should be uppercase.
  • All phone numbers, including CancerCare’s, should be written without the “1-” in front of the area code.
  • Omit superscripts from dates: May 1, not May 1st
  • When writing our address, always spell out “Seventh,” and, space permitting, “Avenue”.

CancerCare-Specific

  • When writing about print publications, the words “booklets” and “fact sheets” should be lowercase (unless part of a title-cased heading)
  • Programs and such happen at our offices, not in our offices. Not that it really matters, but we need to be consistent.

Staff Credentials

  • Use the social work specific and education credential and (e.g., MSW, LCSW, OSW-C) for social workers listed on our website staff listing page and other sections (e.g., Ask CancerCare)
  • An employee’s actual title (e.g., “Director of Education”) should be capitalized if it proceeds name. Do not capitalize titles after name (e.g., Jane Smith, senior coordinator of special events)

Coding Standards

Front End

  • Mark up the organization’s name like so: Cancer<i>Care</i>, or in our Rails environment use <%= cancercare %> or #{cancercare} where appropriate
  • Use non-breaking hyphens (&#8029;) with phone numbers. In Rails, use our <%= phone_number() %> helper function! Pass in a hyphenated phone number and it replaces the hyphens with the non-breaking variety. Also has some handy presets (:main, :fax, :ct, etc.) See application_helper.rb for the full list.
  • Always link email addresses with the mailto: protocol. In Rails, use our <%= email_link() %> helper function! Pass in an email address and get back a proper link. Also has some handy presets (:main, :copay, :events, etc.). See application_helper.rb for the full list.
  • Don’t use target="blank" in links. Let users decide if they want to open a new window or not.

Back End

  • Include the protocol when entering/retrieving URLs in/from the database

Tagging Guidelines

  1. How to apply tags

    • What is the main focus of the Q&A/resource/CEW/pub?
    • Actual (value added) info/content versus simply mentioned as a resource. If a client is looking for clinical trial info, they probably don’t want to see a publication that only mentions one could pursue clinical trials.
  2. Creating tags

    • Think about how client would search and create/use clear tags (e.g., peripheral neuropathy, neuropathy, numbness?).
  3. Broad diagnosis categories and specific diagnosis sub-types:

    • For a specific type of cancer (e.g., CLL, always tag the "parent" diagnosis, e.g., leukemia).
    • If a resource is about a general type of cancer (e.g., leukemia), try to find out what specific types might be covered (e.g., ALL, AML, CLL) and tag appropriately.
  4. For bereavement

    • Simply tag grief and loss + all cancers.

Images Standard

Page Header Image

The header image combines large background imagery with text to call attention to important messaging. The standard size for it is 1900px x 400px



Sliders Image

The sliders are an important part of the experience in the home page. The expected size is 1905px x 568px



Featured Section Image

The featured content appears on the home section as presented below. The recommended size is 330px x 330px



Hero Small Image

Hero's can use a small image that is presented on the right side of the hero. The recommended size is 800px x 450px



People Headshot

People's headshot should be taller than wider. The recommended size is 460px x 614px



Miscellaneous Practices

Spanish Resource Titles

  • Should appear in Spanish on the En Español page. This page is for Spanish-speakers only.
  • Should appear in English on the English-language Spanish page. This page is for English-speakers/bilinguals only.
  • Should appear in Spanish (with English translations in parentheses or nearby) everywhere else.

To this end, I've added a helper function, english_title(), which takes an object as an argument an outputs its English title. An optional second argument of "true" will show the English title in parentheses after the native-language title. This should be used instead of resource.title when you want to suppress non-English titles.

Back to Top

Terms of Use and Privacy Policy

By using our website, you agree to our recently updated Privacy Policy . Here you can read more about our use of cookies which help us make continuous improvements to our website. Privacy Policy.