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 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 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
Issue
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

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 as Simple Dropdown

template-parts/molecules/btn-simple-dropdown


Button with Modal (mobile only)

template-parts/molecules/btn-with-modal


Clear Filter Button

template-parts/molecules/btn-clear-filter


Form: Email

template-parts/molecules/form-email

Form: input states across colorways

template-parts/atoms/form-input

Form: email

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





Policy Notice

template-parts/molecules/policy-notice


Section Title

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

template-parts/molecules/social--share


Social: Nav

template-parts/molecules/social--nav



Card: Person Author

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

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

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

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

Placeholder image

Role Type

Person Name

Pronouns: she/her

Title

Department

Organization


Card: Action

template-parts/molecules/card--action

placeholder image
Action

Fight for Trans Youth Healthcare Access


Card: Common

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

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)

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

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

Card title

Author Name


Card: Spotlight

template-parts/molecules/card--spotlight

Card title


Placeholder image

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


Card: Listing News small

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

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

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

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)

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


Filter Collection

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

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



Cards: Latest Content

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

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

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

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

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

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)

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

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


CTA: Alert Bar

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


CTA: Slim

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

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

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


Hero: Homepage

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

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

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

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

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

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

Placeholder image

Be Known: Supporting Black and LGBTQ+ Communities

An optional subhead.

Hero: Sidebar

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

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

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

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


Audio

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

Test Audio Component

Buttons

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


Content Collection

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

Content Collection: Grid Display

Content Collection: List Display



Divider

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

Divider style: hr


Divider style: clear



Heading

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

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

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

Image/Video Collection

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

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


Instagram

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


Flickr

template-parts/organisms/flexible-components/flickr/display/flickr--display


Migrated Content

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

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

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

This is the Podcast Title

Pull Quote

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

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

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

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


Expandable Card

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

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

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

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


YouTube

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

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