Sample Blocks

3-Up CTA

Placeholder Image

Headline

Dis nibh ac parturient facilisis eros phasellus. A curae tortor scelerisque conubia dui porttitor rutrum rhoncus condimentum. Suspendisse elit feugiat tempor dis nisi lobortis suscipit.
Placeholder Image

Headline

Placeholder Image

Headline

Consequat duis faucibus ipsum sapien arcu consectetuer pede curae lectus. Suspendisse nam pretium purus vehicula pede etiam praesent.

Accordion

Dolor commodo minim, esse. Esse anim exercitation sunt. Exercitation sunt, eu aute veniam. Aute veniam sunt, lorem reprehenderit. Lorem reprehenderit excepteur commodo.
Amet lorem, eiusmod aliquip mollit. Aliquip mollit ut, tempor ullamco incididunt. Tempor ullamco incididunt deserunt veniam est nulla. Incididunt deserunt veniam est. Veniam est nulla, aute dolor reprehenderit mollit veniam. Aute fdolor reprehenderit mollit, veniam ea consectetur. Mollit veniam ea consectetur reprehenderit, lorem dolore.

Button Row CTA

Sample Headline

Contact Cards

Pellentesque eget mus urna et proin ullamcorper molestie massa class lacinia. Conubia mauris rutrum egestas vulputate hendrerit maximus netus gravida tincidunt turpis lorem. Metus donec litora torquent tempus leo elit magna dis nullam inceptos phasellus. Nibh ultrices sociosqu consectetur habitasse ullamcorper sed inceptos pretium penatibus quisque elementum.
Placeholder Image
Name One
Work Title
(999) 222-3333
Placeholder Image
Name Two
Two Title
(999) 222-3333
Se Habla Español
For More Information Contact:
Placeholder Image
Name Three
Three Title
(999) 222-3333

Deck Paragraph

Porta inceptos neque purus ullamcorper viverra egestas consectetur. Accumsan proin libero consequat nullam facilisis elit ultrices molestie. Ullamcorper ante faucibus parturient finibus metus imperdiet consectetur vivamus ut. Condimentum euismod in consequat tempus tellus. Nostra nullam rhoncus nibh conubia proin urna bibendum justo. Vestibulum nunc sodales vehicula cubilia suscipit consequat. Ultricies suspendisse posuere sed finibus eleifend nisi fusce. Eu suscipit viverra massa sodales non per imperdiet. Class nascetur lectus eros dictumst dui nec inceptos blandit id.

Info Bar

Info List

Info List Title

Augue dignissim ornare nostra nibh vulputate condimentum lobortis sapien vitae. Sapien porttitor etiam aliquet nascetur adipiscing a libero metus senectus. Faucibus letius dis dictumst aliquet ridiculus massa ligula habitant condimentum. Velit dui libero consequat bibendum justo aenean magnis. Placerat potenti tempus molestie letius sociosqu quis litora malesuada.

Paragraph One

Egestas commodo euismod viverra cras primis donec. Dictumst augue sem curae nulla quam conubia egestas condimentum facilisis at. Maecenas parturient id lorem at curabitur congue urna. Molestie consectetur tempor vestibulum consequat in nisl.

Paragraph Two

Egestas commodo euismod viverra cras primis donec. Dictumst augue sem curae nulla quam conubia egestas condimentum facilisis at. Maecenas parturient id lorem at curabitur congue urna. Molestie consectetur tempor vestibulum consequat in nisl.
  • item 1
  • item 2
  • item 3

Resource Category

Resource Title

Route Cards

Placeholder Image
Route One
Tempus netus fringilla egestas sollicitudin venenatis. Porttitor nascetur urna mauris gravida adipiscing. Facilisi sollicitudin feugiat mauris curae tempor montes odio. Metus efficitur rutrum suscipit mollis lectus finibus ipsum gravida adipiscing pharetra euismod.
More Information
Communities Served
Forest City
Placeholder Image
Route Two
Lobortis bibendum turpis gravida ut maximus metus condimentum lectus odio sociosqu. Turpis per volutpat hendrerit curabitur litora sollicitudin cras. Ipsum vehicula metus torquent augue morbi nostra. Commodo nascetur quisque himenaeos eget lobortis nullam scelerisque ridiculus tellus malesuada.
More Information
Communities Served
Cloud City
Placeholder Image
Route Three
Etiam egestas sapien ultricies commodo duis in cras turpis. Dictumst suspendisse arcu pellentesque dignissim metus duis mauris enim dictum at. Proin placerat mollis viverra metus aptent platea vestibulum lobortis letius magna. Nostra nunc curabitur placerat consequat nec condimentum maximus ligula dignissim si ad.
More Information
Communities Served
Cloud Forest
Cubilia primis turpis sed senectus donec id suscipit. Arcu nullam ante egestas fames lobortis pretium nulla platea justo quam. Habitant porttitor scelerisque mollis netus viverra porta nisi orci ex. Nunc maximus porttitor magnis libero nec nisl. Egestas mus commodo nisi neque augue nibh diam cubilia aptent gravida convallis. Laoreet accumsan vivamus sodales mauris porta parturient tempor faucibus vel.
Testimonial Person
Generic Placeholder Image

Text + Image

Sample Headline

Sample description lorem ipsum.
Sample Link
Generic Placeholder Image

Wayfinding Cards

Typography

sass/primitives/typography.scss

.h1

.h1-medium

.h2

.h3

.h4

.h4-bold

.h5

.intro

.body-xl

.body-lg

.body-base

.body-base-bold

.body-sm

.utility-lg

.utility-lg-bold

.utility

.utility-bold

.utility-sm

.utility-sm-bold

.utility-breadcrumb

Common Variations

.h1.text-white

.h2.text-gray-dk

.h3.text-white

.h4.text-black

.h4.text-gray-dk

.h4.letter-spacing.text-white

Text Color

tokens/src/color.tokens.json

.text-[color]. Adds colors to base/_generated-variables

.text-black

.text-gray-dk

.text-white

.text-gray-lt

Text Weight

tokens/src/typography.tokens.json

.font-bold 700

.font-semibold 600

.font-medium 500

.font-regular 400

.font-book/.font-light 300

Buttons and links

/css/common/buttons-links.css

Primary Link

Button Classes:

Button

Button Classes: small

Button

Button Classes: extra-small

Button

Button Classes: extra-extra-small

Button

Button Classes: hocus-underline

Hocus Underline

Button Classes: green-275 small

Button Classes: white small

Button Classes: white-grey-50 small

Button

Button Classes: white-green-50 small

Button

Button Classes: green-50 small

Button

Button Classes: green-50-alt

Button

Button Classes: grey-50-green-100

Button

Button Classes: green-275-green-100

Button

Button Classes: bordered

Bordered

Icon Only Link

Button Icon Only Classes: button-icon-only

Button

Button Icon Only Classes: button-icon-only green-275

Button

Button Text Classes:

Button Text 123

Button Text Classes: white

Button Text 123

Social Links

Layout

assets/css/base/utilities.css

Grid

Wrapped in grid-col-2

Wrapped in grid-col-3

Wrapped in .grid-col-4

Width, margin: zero auto

Use md: prefix to apply at md breakpoint.

.mt-0.my-auto.md:w-3/4

.my-0.mx-auto.w-66-md

.my-0.mx-auto.w-50-md

.my-0.mx-auto.w-33-md

.my-0.mx-auto.w-25-md

Display

.inline

.inline-block

.block

.flex

Position, Z-index

Relative
.absolute.top-0.left-0
.absolute.bottom-0.right-0
  • .absolute
  • .relative
  • .top-0
  • .right-0
  • .bottom-0
  • .left-0
  • .z-0
  • .z-1
  • .z-2

Spacing

sass/layout/_margins.scss

Variables

Used for margin, padding, and height. Designers use mathematical relationships to define spacing. All of the margin, padding and height classes use these base values. The sizes are also available as sass variables.

PX: 1px (1px), $spacer-px

3XS: .25rem (4px), $spacer-3xs

2XS: .5rem (8px), $spacer-2xs

XS: 1rem (16px), $spacer-xs

SM: 1.5rem (20px), $spacer-sm

MD: 2rem (32px), $spacer-md

LG: 3rem (48px), $spacer-lg

XL: 4rem (64px), $spacer-xl

2XL: 6rem (96px), $spacer-2xl

3XL: 8.125rem (130px), $spacer-3xl

4XL: 10rem (160px), $spacer-4xl

Margin & Padding

.[type][direction]-[size]

Type

  • m (margin)
  • p (padding)

Direction

  • t (top)
  • r (right)
  • b (bottom)
  • l (left)
  • x (left + right)
  • y (top + bottom)
  • [blank] (all)

Size

  • auto
  • zero
  • 4xs
  • 3xs
  • 2xs
  • xs
  • sm
  • base
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl
Margin Bottom
.mb-3xs
.mb-2xs
.mb-xs
.mb-sm
.mb-base
.mb-md
.mb-lg
.mb-xl
.mb-2xl
.mb-3xl
.mb-4xl
Margin Top
.mt-3xs
.mt-2xs
.mt-xs
.mt-sm
.mt-base
.mt-md
.mt-lg
.mt-xl
.mt-2xl
.mt-3xl
.mt-4xl
Margin Top & Bottom
.my-3xs
.my-2xs
.my-xs
.my-sm
.my-base
.my-md
.my-lg
.my-xl
.my-2xl
.my-3xl
.my-4xl
Margin Left & Right
.mx-3xs
.mx-2xs
.mx-xs
.mx-sm
.mx-base
.mx-md
.mx-lg
.mx-xl
.mx-2xl
.mx-3xl
.mx-4xl

Component

.m-card : card margin

.p-card : card padding

.py-4xl

.py-xl

Utilities

Tailwind docs for all utilities >
  • Display
  • .block
  • .inline
  • .inline-block
  • .flex
  • Position
  • .absolute
  • .relative
  • Text transform
  • .capitalize
  • .LOWERCASE
  • .uppercase
  • Text align
  • .text-left>
  • .text-center
  • .text-right>
  • Additional
  • .hyphenate
  • .letter-spacing

Bg Styles

sass/global/_03.color-modifiers.scss

.bg-black

.bg-gray-dk

.bg-white

.bg-gray-lt

.bg-overlay-black.text-white

Forms

Radio buttons

WYSIWYG and Components

h2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis elit non odio consectetur in massa. Vestibulum sagittis in viverra volutpat ultricies id. Elit potenti tellus massa ullamcorper cursus. Accumsan, aliquam odio egestas at laoreet. Mauris sed diam fringilla nunc tempor massa pellentesque et risus. Et duis dictum sit porttitor blandit. Lectus quam suscipit suspendisse at fusce velit velit in elementum.

h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis elit non odio consectetur in massa. Vestibulum sagittis in viverra volutpat ultricies id. Elit potenti tellus massa ullamcorper cursus. Accumsan, aliquam odio egestas at laoreet. Mauris sed diam fringilla nunc tempor massa pellentesque et risus. Et duis dictum sit porttitor blandit. Lectus quam suscipit suspendisse at fusce velit velit in elementum.

h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis elit non odio consectetur in massa. Vestibulum sagittis in viverra volutpat ultricies id. Elit potenti tellus massa ullamcorper cursus. Accumsan, aliquam odio egestas at laoreet. Mauris sed diam fringilla nunc tempor massa pellentesque et risus. Et duis dictum sit porttitor blandit. Lectus quam suscipit suspendisse at fusce velit velit in elementum.

h5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis elit non odio consectetur in massa. Vestibulum sagittis in viverra volutpat ultricies id. Elit potenti tellus massa ullamcorper cursus. Accumsan, aliquam odio egestas at laoreet. Mauris sed diam fringilla nunc tempor massa pellentesque et risus. Et duis dictum sit porttitor blandit. Lectus quam suscipit suspendisse at fusce velit velit in elementum.

h6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis elit non odio consectetur in massa. Vestibulum sagittis in viverra volutpat ultricies id. Elit potenti tellus massa ullamcorper cursus. Accumsan, aliquam odio egestas at laoreet. Mauris sed diam fringilla nunc tempor massa pellentesque et risus. Et duis dictum sit porttitor blandit. Lectus quam suscipit suspendisse at fusce velit velit in elementum.

h2

h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis elit non odio consectetur in massa. Vestibulum sagittis in viverra volutpat ultricies id. Elit potenti tellus massa ullamcorper cursus. Accumsan, aliquam odio egestas at laoreet. Mauris sed diam fringilla nunc tempor massa pellentesque et risus. Et duis dictum sit porttitor blandit. Lectus quam suscipit suspendisse at fusce velit velit in elementum.

  • The Philanthropic Initiative for Racial Equity’s Grantmaking with a Racial Justice Lens Guide lorem ipsum dolor sit amet, consectetur adipiscing elit
  • NCRP’s Power Moves: Your essential philanthropy assessment guide for equity and justice
    • SCG’s Evaluating Your Internal Practices to Become an Anti-Racist Organization
    • And many other immediate resources
  1. Emerging systems change efforts
  2. Start their advocacy efforts
  3. Support our democratic institutions
  4. Shift power to the next generation of donors

Blockquote Every day, we have a choice. We can take the easier road, the more cynical road, which is a role sometimes based on a dream of a past that never was. Fear of each other distancing and blame, or we can take the much more difficult path, the road of transformation, transcendence, compassion, and love, but also accountability and justice.

Author Jacqueline Novogratz, Founder and CEO of Acumen