ACLU Parent Theme

Design system components available to the National and Affiliate sites.

Global Elements

The "Foundations" section outlines the color tokens, typography styles, grids, and spacing rules used throughout the design system.


Colors


Colorways

Colorways are color relationships between background colors, text, buttons and other elements. Using a block with a different colorway can help break up a longer page or change the tone.

Development notes: defined in tokens/src/color .tokens.json, and global/bundles/common/styles/CSS/_elements/colorways .css. Variable names: .color-primary in CSS: var(--color-primary) and .color-secondary in CSS: var(--color-secondary)

colorway-dark-navy

color-primary

color-secondary

colorway-dark-burgundy

color-primary

color-secondary

colorway-white

color-primary

color-secondary

colorway-cream

color-primary

color-secondary

colorway-red

color-primary

color-secondary

colorway-blue

color-primary

color-secondary

colorway-light-azure

color-primary

color-secondary

colorway-light-orange

color-primary

color-secondary

colorway-dark-purple

color-primary

color-secondary

colorway-offblack

color-primary

color-secondary


Typography

Use headings to improve scan-ability and provide context for users to better understand the page. Headings also help structure page content for screen readers and search engines. Headings should be logically structured on a page using proper hierarchy, headings are ranked 'h1' through 'h6'. A page starts with the H1 heading, which describes a page's main topic— the title of the page. Subsections can be organized with 'h2 level headings. Those subsections can themselves be divided with 'h3' level headings, and so on.

Defined in global/bundles/common/styles/_elements/typography.css. Use classes in twig templates to apply styles.


Header styles

.is-heading.is-special-size-90

.is-heading.is-size-1

.is-heading.is-size-2

.is-heading.is-size-3

.is-heading.is-size-4

.is-heading.is-size-5

.is-heading.is-special-size-21

.is-heading.is-size-2 uppercase

.is-heading.is-size-4 uppercase

.is-heading.is-size-5 uppercase


Text styles

.is-body.is-size-4 font-bold

.is-body.is-size-5 font-bold

.is-body.is-size-6 font-bold

.is-body.is-size-7 font-bold

.is-body.is-special-size-21 font-bold

.is-body.is-size-4

.is-body.is-size-5

.is-body.is-size-6

.is-body.is-size-7

.is-body.is-special-size-21

Serif

.is-body-serif.is-size-5

.is-body-serif.is-size-6

.is-body-serif.is-size-7

Formatted text

Text wrapped in the class ".text-formatted". Strong text . Italic text . And a link.

This embed will serve content from {{ domain }}. See our privacy statement

Spacing

Spacing values define the space between elements on the page. This can include space between buttons, between columns of text, or around an image. Setting a scale of sizes helps the page to feel cohesive and considered.

All of the margin, padding and height classes use generated from these base values. They are also available as css and tailwind variables.
Vertical component spacing classes include: .block-spacing--default, .block-spacing--sm, .block-spacing--lg classes define block-level spacing.

Tokens defined in tokens/src/spacer.tokens.json. See tokens/src/spacer-tokens.json for definitions. CSS custom property name: --spacer-[size]

0

0 rem

(0 px)

1

.25 rem

(4 px)

2

.5 rem

(8 px)

3

.75 rem

(12 px)

4

1 rem

(16 px)

6

1.5 rem

(24 px)

7

1.75 rem

(28 px)

8

2 rem

(32 px)

10

2.5 rem

(40 px)

11

2.75 rem

(44 px)

12

3 rem

(48 px)

14

3.5 rem

(56 px)

16

4 rem

(64 px)

20

5 rem

(80 px)

24

6 rem

(96 px)


Grids

Developer notes: Defined in tailwind-grids.json. Use "site-container p-site" for site container and site-wide side padding

.grid

.grid.grid-cols-2.gap-default

.grid.grid-cols-3.gap-default

grid.grid-cols-4.gap-default

grid.grid-cols-5.gap-default

grid.grid-cols-12.gap-default .col-span-4 .col-span-8

Atoms

The “Atoms” section defines small UI components in the design system including buttons, badges, and icons.


Badges

tag-alert

Join Us

Icons

Verified icons and their labels can be found in atoms/icons.php.

Action
Campaign
Court Case
Chapter
Document
Event
FOIA Collection
Initiative
Job & Opportunity
Know Your Rights
Legislation
News & Commentary
Resource
Petition
News & Commentary
Podcast
Press Release
Publication

Form input

See also: Form molecules.

Molecules

The “Molecules” section outlines larger UI elements throughout the design system including section titles and cards that can display a variety of content. These elements are often seen in multiple organisms or sections of your site. For example, a card may appear on an archive page in a listing as well as in a featured content component.


Button with Dropdown

global/template-parts/molecules/btn-with-dropdown

To display this component in a Section Title, pass in `show_filter` as true, and the `filter` details array to the `section-title` molecule.

This is a description for the section title.


Button with Modal (mobile only)

global/template-parts/molecules/btn-with-modal


Clear Filter Button

global/template-parts/molecules/btn-clear-filter


Form: Email

global/template-parts/molecules/form-email

Form: input states across colorways

global/template-parts/atoms/form-input

Form: email

global/template-parts/molecules/form-email/display/form-email--display





Policy Notice

global/template-parts/molecules/policy-notice


Section Title

global/template-parts/molecules/section-title

Section Title

Section Title w/description

This is a description of the section title. It can be used to provide more context to the user.


Social: Share

global/template-parts/molecules/social--share


Social: Nav

global/template-parts/molecules/social--nav



Card: Person Author

global/template-parts/molecules/card--author

Placeholder image

Simon McCormack

Senior Writer

he/him/his

Placeholder image

Simon McCormack

Senior Writer

he/him/his


Card: Person - minimal

global/template-parts/molecules/card--person-minimal

Person Name

Job title, Organization

she/they

Bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.

Card: Person

global/template-parts/molecules/card--person

Placeholder image

Person Name

Job title

Placeholder image

Person Name

Job title

With an optional bio section.


Card: Person - full bio

global/template-parts/molecules/card--person-full-bio

Placeholder image

Role Type

Person Name

Pronouns: she/her

Title

Department

Organization


Card: Action

global/template-parts/molecules/card--action

placeholder image
Action

Fight for Trans Youth Healthcare Access


Card: Common

global/template-parts/molecules/card--common

Campaign
Placeholder image

Card title

Status label: Ongoing
Podcast
Placeholder image

Card title

Status label: Ongoing
Placeholder image

Card title



Card: News

global/template-parts/molecules/card--news

Placeholder image

Card title

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget imperdiet libero, quis ultricies tellus. Sed imperdiet felis eu rutrum elementum.

Author Name


Card: News (md)

global/template-parts/molecules/card--news-md

Placeholder image

Card title

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Author Name


Card: Press Release

global/template-parts/molecules/card--press-release

Card title

Author Name


Card: Spotlight

global/template-parts/molecules/card--spotlight

Card title


Placeholder image

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Card: Listing News small

global/template-parts/molecules/card--listing--news-sm

Card title

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget imperdiet libero, quis ultricies tellus. Sed imperdiet felis eu rutrum elementum.
Placeholder image

Card: Listing

global/template-parts/molecules/card--listing

Campaign
Sep 2023
Placeholder image
  • Issue|
  • +3 Issues

Card title

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget imperdiet libero, quis ultricies tellus. Sed imperdiet felis eu rutrum elementum.
Status label: Ongoing

Card: Listing News

global/template-parts/molecules/card--listing--news

Card title

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget imperdiet libero, quis ultricies tellus. Sed imperdiet felis eu rutrum elementum.

Placeholder image

Card: Listing Press

global/template-parts/molecules/card--listing--press

Card title

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget imperdiet libero, quis ultricies tellus. Sed imperdiet felis eu rutrum elementum.
Status label: Ongoing

Card: Listing date-first (sm)

global/template-parts/molecules/card--listing--date-first--small


Filter Collection

global/template-parts/molecules/filter-collection


Components

Components available on all pages. They can be used to build entire page layouts in dynamic ways.


Banner: Global

global/template-parts/organisms/components/banner--global/display/banner--global--display



Cards: Latest Content

global/template-parts/organisms/components/cards--latest-content/display/cards--latest-content--display

Latest Content

This is a description of the featured content. It can be used to provide more context to the user.

Press Release
Placeholder image

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Press Release
Placeholder image

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Press Release
Placeholder image

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Press Release
Placeholder image

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Cards: Listing

global/template-parts/organisms/components/cards--listing/display/cards--listing--display

Sample Heading

This is a description of the listing content. It can be used to provide more context to the user.

Resource
Placeholder image

Style Guide

Resource
Placeholder image

Style Guide


Cards: Small Date First Listing

global/template-parts/organisms/components/cards--listing--date-first--small/display/cards--listing--date-first--small--display

Sample Heading

This is a description of the featured content. It can be used to provide more context to the user.


Cards: News Listing

global/template-parts/organisms/components/cards--listing--news/display/cards--listing--news--display

Latest Content

This is a description of the featured content. It can be used to provide more context to the user.

Style Guide

Placeholder image

Style Guide

Placeholder image

Style Guide

Placeholder image

Style Guide

Placeholder image

Cards: News Md

global/template-parts/organisms/components/cards--news-md/display/cards--news-md--display

Sample Heading

This is a description of the listing content. It can be used to provide more context to the user.

Placeholder image

Card title

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Author Name

Placeholder image

Card title

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Author Name

Placeholder image

Card title

Teaser text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Author Name


Cards: Press Releases

global/template-parts/organisms/components/cards--press-releases/display/cards--press-releases--display

Press Releases

Card title

Author Name

Card title

Author Name

Card title

Author Name


Cards: Person (minimal)

global/template-parts/organisms/components/cards--person-minimal/display/cards--person-minimal--display

Person (minimal)

Person Name

Job title, Organization

she/they

Bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.
Person Name

Job title, Organization

she/they

Bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.
Person Name

Job title, Organization

she/they

Bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.



CTA: Email Capture

global/template-parts/organisms/components/cta--email-capture/display/cta--email-capture--display


CTA: Alert Bar

global/template-parts/organisms/components/cta--alert-bar/display/cta--alert-bar--display


CTA: Slim

global/template-parts/organisms/components/cta--slim/display/cta--slim--display

If you've been discriminated against based on lorem ipsum dolor sit amet, consectetur est, the ACLU wants to hear about it.

If you've been discriminated against based on lorem ipsum dolor sit amet, consectetur est, the ACLU wants to hear about it.

Optional description text.

Hero: Title on Color

global/template-parts/organisms/components/hero--title-on-color/display/hero--title-on-color--display

Page or Content Title

Description text. Summarize the civil liberties issue, focusing on its impact, relevant laws, and the ACLU's response. Keep the description clear and concise, ensuring it's accessible to a broad audience.

Without description, breadcrumbs or social.


Hero: Title Metadata

global/template-parts/organisms/components/hero--title-metadata/display/hero--title-metadata--display


Hero: Homepage

global/template-parts/organisms/components/hero--homepage/display/hero--homepage--display

Email Signup, Blue

Make a local impact

Support ACLU Texas’ Fight for Justice

Your donation amplifies the voice of liberty in Texas. Together, we can champion the causes of equality, freedom, and justice in our own backyard.

homepage hero image

Email Signup, Red

Make a local impact

Support ACLU Texas’ Fight for Justice

Your donation amplifies the voice of liberty in Texas. Together, we can champion the causes of equality, freedom, and justice in our own backyard.

homepage hero image

Donate, Blue

Make a local impact

Support ACLU Texas’ Fight for Justice

Your donation amplifies the voice of liberty in Texas. Together, we can champion the causes of equality, freedom, and justice in our own backyard.

homepage hero image

Donate, Red

Make a local impact

Support ACLU Texas’ Fight for Justice

Your donation amplifies the voice of liberty in Texas. Together, we can champion the causes of equality, freedom, and justice in our own backyard.

homepage hero image

Hero: 404 Page

global/template-parts/organisms/components/hero--404/display/hero--404--display

Page Not Found

Sorry, we couldn’t find this page. There may have been a typo or a broken link. Try searching to find what you were looking for.

Some things you can do:

Person holding a Dissent is Patriotic sign

Without buttons.

Page Not Found

Sorry, we couldn’t find this page. There may have been a typo or a broken link. Try searching to find what you were looking for.

Person holding a Dissent is Patriotic sign

Hero: Issue Detail

global/template-parts/organisms/components/hero--issue-detail/display/hero--issue-detail--display

Issue Detail

Description text. Summarize the civil liberties issue, focusing on its impact, relevant laws, and the ACLU's response. Keep the description clear and concise, ensuring it's accessible to a broad audience.
Placeholder image

Issue Detail Hero with Facts.

Issue Detail

Description text. Summarize the civil liberties issue, focusing on its impact, relevant laws, and the ACLU's response. Keep the description clear and concise, ensuring it's accessible to a broad audience.
Placeholder image

What you need to know

Fact 1

Description of Fact 1

Fact 2

Description of Fact 2

Fact 3

Description of Fact 3


Hero: Legislation Detail

global/template-parts/organisms/components/hero--legislation-detail/display/hero--legislation-detail--display

Page or Content Title

  • Status: Active
  • Bill number: SB 322
  • Session: 2023
  • Latest Update: July 12, 2023
Placeholder image

Hero: Podcast Detail

global/template-parts/organisms/components/hero--podcast-detail/display/hero--podcast-detail--display

Placeholder image

"Lighting money on fire:" The vast dysfunction of the death penalty

July 25, 2023

42:55 mins

Hero: Overlay

global/template-parts/organisms/components/hero--overlay/display/hero--overlay--display

Placeholder image

Be Known: Supporting Black and LGBTQ+ Communities

An optional subhead.

Hero: Sidebar

global/template-parts/organisms/components/hero--sidebar/display/hero--sidebar--display

  • Home >
  • Press Releases

Heading

Medical decisions should be made between patients (and their parents) and their doctors – not politicians. Ask your legislators to support freedom as family value in 2024!


Hero: Sidebar Bio

global/template-parts/organisms/components/hero--sidebar-bio/display/hero--sidebar-bio--display

Placeholder image

ACLU Minnesota Staff

Catherine Ahlin-Halverson

Pronouns: she/her/hers


Search Dropdown

global/template-parts/organisms/components/search-dropdown/display/search-dropdown--display


Flexible-components

Flexible-components available on all pages. They can be used to build entire page layouts in dynamic ways.


Accordion

global/template-parts/organisms/flexible-components/accordion/display/accordion--display


Audio

global/template-parts/organisms/flexible-components/audio/display/audio--display

Test Audio Component

Buttons

global/template-parts/organisms/flexible-components/buttons/display/buttons--display


Content Collection

global/template-parts/organisms/flexible-components/content-collection/display/content-collection--display

Content Collection: Grid Display

Content Collection: List Display



Divider

global/template-parts/organisms/flexible-components/divider/display/divider--display

Divider style: hr


Divider style: clear



Heading

global/template-parts/organisms/flexible-components/heading/display/heading--display

Heading Two

Has a subhead with the headline

Heading Two with Colormark on Top

Has a subhead with the headline

Heading Three

Has a subhead with the headline lorem ipsum dolor sit amet speculo fabulous symbat

Heading Four

Heading Two

Has a subhead with the headline

Heading Two with Colormark on Top

Has a subhead with the headline

Heading Three

Has a subhead with the headline lorem ipsum dolor sit amet speculo fabulous symbat

Heading Four


Migrated content Heading example

Some migrated content comes in with a hr.mark and h2.with-mark


iFrame

global/template-parts/organisms/flexible-components/iframe/display/iframe--display

This embed will serve content from {{ domain }}. See our privacy statement

Image/Video Collection

global/template-parts/organisms/flexible-components/image-video-collection/display/image-video-collection--display

Image/Video Collection: Grid Display

This is the description for the Image Collection: Grid Display

Image/Video Collection: Carousel Display

This is the description for the Image Collection: Carousel Display


Infogram

global/template-parts/organisms/flexible-components/infogram/display/infogram--display


Instagram

global/template-parts/organisms/flexible-components/instagram/display/instagram--display


Migrated Content

global/template-parts/organisms/flexible-components/migrated/display/migrated--display

Below is a table with two columns, representing the wide array of things that could be put in the migrated component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae

  • duis mattis
  • Vel in ultricies
  • vel fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Non massa enim vitae duis mattis.

  1. Ultrices praesent amet
  2. Ipsum justo massa
  3. Eu dolor aliquet risus gravida nunc

Notice

global/template-parts/organisms/flexible-components/notice/display/notice--display

Heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae

  • duis mattis
  • Vel in ultricies
  • vel fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Non massa enim vitae duis mattis.

  1. Ultrices praesent amet
  2. Ipsum justo massa
  3. Eu dolor aliquet risus gravida nunc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae

  • duis mattis
  • Vel in ultricies
  • vel fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Non massa enim vitae duis mattis.

  1. Ultrices praesent amet
  2. Ipsum justo massa
  3. Eu dolor aliquet risus gravida nunc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae

  • duis mattis
  • Vel in ultricies
  • vel fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Non massa enim vitae duis mattis.

  1. Ultrices praesent amet
  2. Ipsum justo massa
  3. Eu dolor aliquet risus gravida nunc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae

  • duis mattis
  • Vel in ultricies
  • vel fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Non massa enim vitae duis mattis.

  1. Ultrices praesent amet
  2. Ipsum justo massa
  3. Eu dolor aliquet risus gravida nunc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Podcast

global/template-parts/organisms/flexible-components/podcast/display/podcast--display

This is the Podcast Title

Pull Quote

global/template-parts/organisms/flexible-components/pullquote/display/pullquote--display

The tone should be authoritative yet approachable, encouraging reader engagement and understanding.
— - Quote source, full width
The tone should be authoritative yet approachable, encouraging reader engagement and understanding.
— - Quote source, aligned left
The tone should be authoritative yet approachable, encouraging reader engagement and understanding.
— - Quote source, aligned right

Text

global/template-parts/organisms/flexible-components/text/display/text--display

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae

  • duis mattis
  • Vel in ultricies
  • vel fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Non massa enim vitae duis mattis.

  1. Ultrices praesent amet
  2. Ipsum justo massa
  3. Eu dolor aliquet risus gravida nunc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae

  • duis mattis
  • Vel in ultricies
  • vel fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Non massa enim vitae duis mattis.

  1. Ultrices praesent amet
  2. Ipsum justo massa
  3. Eu dolor aliquet risus gravida nunc

Left-aligned, 1/3 width image followed by a Text component

Caption, width
Credit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Right-aligned, half width image followed by a Text component

Caption, width
Credit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Timeline

global/template-parts/organisms/flexible-components/timeline/display/timeline--display

Our History

The American Civil Liberties Union was founded in 1920 in reaction to nationwide civil rights abuses in the wake of World War I. In the years since, the organization has evolved from a small group of idealists into the nation’s premier defender of the rights enshrined in the U.S. Constitution. With nearly 2.0 million members, over 1700 employees - 500 of whom are staff attorneys and 200 working as policy and organizing experts - and offices throughout the nation, the ACLU of today continues to fight government abuse and to vigorously defend individual freedoms.

As the ACLU’s message spread across the country, individual states began to form affiliates to address civil rights issues on the state level. The North Carolina affiliate was founded in 1965 in response to a "speaker ban" imposed by the state's General Assembly in June 1963.

At the time, university campuses were frequently the sites of protests for the civil rights movement and in opposition to the Vietnam War. Some legislators were convinced that the protests were the work of communists seeking to extend their influence and power in the U.S. In response, just one day before the 1963 legislative session ended and without a committee hearing, the members almost unanimously passed a bill limiting the use of state-supported university facilities to "known members of the Communist Party," persons who are "known to advocate the overturning" of the Constitution, or who had taken the Fifth Amendment "in respect to communist or subversive connections or activities.''

The administrative heads of the university, the boards of trustees, the faculties and students, as well as a large majority of the state’s media opposed the ban and urged its repeal, but to no avail. A declaration that hundreds of professors of the Chapel Hill and Greensboro campuses might leave UNC had no apparent effect, but a warning that the university might be disaccredited by the Southern Association of College and Schools, and millions of dollars in grants consequently be lost, produced a modest change. In November 1965, a special session of the General Assembly amended the ban, directing the boards of trustees in lieu of the attorney general to regulate admission of speakers on a very restricted basis.

The following spring, a dramatic, nationally televised confrontation occurred on the Chapel Hill campus. After some student groups invited Herbert Aptheker and Frank Wilkinson to speak and the administration denied him permission to do so on the campus, almost 1,000 students gathered at the edge of the campus to hear the avowed communists address them from outside the university stone wall on Franklin Street.

Black and white photo of three men standing in front of a crowd of students.

Frank Wilkinson at the McCorkle Place wall, 2 March 1963, Chapel Hill, N.C.

Source: UNC Libraries.

Founding of the Affiliate

The “speaker ban” outraged North Carolinians devoted to civil liberties. In 1965 two lawyers, James Mattocks of High Point and Charles Lambeth of Thomasville, decided to organize a state affiliate of the ACLU as a prelude to a test of the constitutionality of the speaker ban. Mattocks had been the state correspondent for the ACLU, but at the time, only the larger states had organized affiliates.

In May 1965 they convened a meeting at the University Presbyterian Church in Chapel Hill to establish the North Carolina Civil Liberties Union (now known as the ACLU of North Carolina). The fifty people from across the state who turned out elected a Board of Directors with Lambeth as its president and resolved to establish a state office in Greensboro. Committees were set up, a membership drive planned, and a campaign to strike down the speaker ban was given the highest priority.

Subsequently, student leaders decided to challenge the ban in the U.S. District Court in Greensboro. The recently formed affiliate provided counsel for the plaintiffs, with McNeill Smith, a member of its Board of Directors, as the attorney in charge. He was joined by another lawyer from his firm, Norman Smith. UNC-CH Law Professor Daniel Pollitt, another member of the Board, submitted an amicus curiae brief, and Duke Law Professor William Van Alstyne filed a brief on behalf of the American Association of University Professors. Finally, in February 1968, the court condemned the ban as an unconstitutional violation of the First and Fifth Amendments.

The ACLU of North Carolina began its life with a resounding victory.

Scanned copy of a legal document.

The judge’s decision in the case against the speaker’s ban.

Source: UNC Libraries.

The Affiliate Today

As the affiliate grew in numbers, Norman Smith became the part-time General Counsel and Executive Secretary, in addition to building a private law firm in Greensboro. When the legal responsibilities increased, a separate part-time Executive Secretary was hired. The affiliate formed several local chapters devoted to addressing matters of civil liberties in cities across the state, including Charlotte, Greensboro, Raleigh, Greenville, and Chapel Hill-Carrboro.

Today, the affiliate employs 29 full-time staff and boasts nearly 40,000 statewide members and supporters. As we enter our 60th year, we are prepared to face new challenges and enter a new era of advocacy. While we confront a hostile presidency and a legislature determined to strip North Carolinians of our civil rights, looking back at our history provides critical perspective.

The issue areas we champion now are unfortunately the same issues that our organization has defended since our founding. As Coretta Scott King said, “struggle is a never ending process. Freedom is never really won; you earn it and win it in every generation.”

Today’s iteration of ACLU-NC has taken up the baton in the quest for freedom and won some monumental achievements. If our predecessors were able to overcome such seemingly insurmountable odds, then there is always hope for the future.

ACLU of North Carolina 60th Anniversary logo

60th Anniversary Hootenanny

The ACLU of North Carolina is turning 60, and we’re throwing a hootenanny! In celebration of six decades of defending civil liberties, join us for an evening of music, movement, and advocacy. This one-of-a-kind event will bring together over 300 community members, leaders, and changemakers for a night of connection, reflection, and impact.

A hootenanny is a traditional, informal gathering rooted in Southern culture—a relaxed get-together where live music, storytelling, and community spirit come together. By embracing this tradition, we honor our Southern roots and invite you to experience a warm, authentic celebration of our shared commitment to justice.

The evening will feature a special archival exhibition that highlights six decades of courageous advocacy and key milestones in the fight for civil rights. We will recognize distinguished honorees whose tireless work has advanced civil liberties, and local as well as national leaders will share their insights in brief remarks. Together, we’ll reflect on the past, look forward to the future, and reaffirm our ongoing commitment to civil rights and liberties across North Carolina.

ACLU of North Carolina 60th Anniversary logo

Quiz

global/template-parts/organisms/flexible-components/quiz/display/quiz--display


Expandable Card

global/template-parts/organisms/flexible-components/shared-expandable-card/display/shared-expandable-card--display

Expandable Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Non massa enim vitae duis mattis.
Expandable card content here. Years of hard-fought civil liberty protections are under threat.
Learn more

Image

global/template-parts/organisms/flexible-components/single-image/display/single-image--display

Caption, half width, left-aligned
Credit
Caption, half width, right-aligned
Credit
Caption, one-third width, left-aligned
Credit
Caption, one-third width, right-aligned
Credit
Caption, standard width
Credit
Caption, wide width
Credit
Caption, full-bleed width
Credit

Video

global/template-parts/organisms/flexible-components/video/display/video--display


YouTube

global/template-parts/organisms/flexible-components/youtube/display/youtube--display

This embed will serve content from {{ domain }}. See our privacy statement