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
colorway-dark-burgundy
colorway-white
colorway-cream
colorway-red
colorway-blue
colorway-light-azure
colorway-light-orange
colorway-dark-purple
colorway-offblack
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.
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
Buttons & Links
Buttons and links with icons are designed to work across colorways and have a consistent set of interaction styles.
All button and links can be included in a php template as components. CSS: common/styles/CSS/atoms-molecules/buttons.css, and buttons-icons.css. Templates: common/styles/template-partials/atoms/buttons
Dark Navy Colorway
.btn-text | svg_name: download-lg | size: md
White Colorway
.btn-text | svg_name: download-lg | size: md
Dark Burgundy Colorway
.btn-text | svg_name: download-lg | size: md
Icons
Verified icons and their labels can be found in atoms/icons.php.
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.
Breadcrumbs
template-parts/molecules/breadcrumbs
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.
Section Title
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
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
Form: Search
template-parts/molecules/form-search
Jump Links
template-parts/molecules/jumplinks
Pagination
template-parts/molecules/pagination
(coming soon)
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: Custom links
template-parts/molecules/social--custom-links
Card: Person Author
template-parts/molecules/card--author
Card: Person - minimal
template-parts/molecules/card--person-minimal
Card: Person
template-parts/molecules/card--person
Card: Person - full bio
template-parts/molecules/card--person-full-bio
Role Type
Person Name
Pronouns: she/her
Title
Department
Organization
Card: Common
template-parts/molecules/card--common
Card: Featured
template-parts/molecules/card--featured
Card title
Card: News
template-parts/molecules/card--news
Card: News (md)
template-parts/molecules/card--news-md
Card: Press Release
template-parts/molecules/card--press-release
Card: Spotlight
template-parts/molecules/card--spotlight
Card: Listing News small
template-parts/molecules/card--listing--news-sm
Card: Listing
template-parts/molecules/card--listing
Card: Listing News
template-parts/molecules/card--listing--news
Card: Listing Press
template-parts/molecules/card--listing--press
Card title
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: Featured Content
template-parts/organisms/components/cards--featured/display/cards--featured--display
Featured
Content Title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.
Card title
Card title
Cards: Featured Case/Legislation
template-parts/organisms/components/cards--featured-case-legislation/display/cards--featured-case-legislation--display
Cards: Small Date First Listing
template-parts/organisms/components/cards--listing--date-first--small/display/cards--listing--date-first--small--display
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.
Cards: Person (minimal)
template-parts/organisms/components/cards--person-minimal/display/cards--person-minimal--display
Person (minimal)
Carousel: Action Cards
template-parts/organisms/components/carousel--action/display/carousel--action--display
Take Action
CTA: Email Capture
template-parts/organisms/components/cta--email-capture/display/cta--email-capture--display
Stay Informed
Sign up to be the first to hear about how to take action.
By completing this form, I agree to receive occasional emails per the terms of the ACLU’s privacy statement.
By completing this form, I agree to receive occasional emails per the terms of the ACLU’s privacy statement.
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.
Hero: Title on Color
template-parts/organisms/components/hero--title-on-color/display/hero--title-on-color--display
Page or Content Title
Without description, breadcrumbs or social.
Page or Content Title
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.
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.
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.
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.
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:
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.
Hero: Issue Detail
template-parts/organisms/components/hero--issue-detail/display/hero--issue-detail--display
Issue Detail
Issue Detail Hero with Facts.
Issue Detail
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
Hero: Podcast Detail
template-parts/organisms/components/hero--podcast-detail/display/hero--podcast-detail--display
"Lighting money on fire:" The vast dysfunction of the death penalty
July 25, 2023
Hero: Overlay
template-parts/organisms/components/hero--overlay/display/hero--overlay--display
Be Known: Supporting Black and LGBTQ+ Communities
Hero: Sidebar
template-parts/organisms/components/hero--sidebar/display/hero--sidebar--display
Hero: Sidebar Bio
template-parts/organisms/components/hero--sidebar-bio/display/hero--sidebar-bio--display
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
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
Content Link
template-parts/organisms/flexible-components/content-link/display/content-link--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
Heading Two with Colormark on Top
Heading Three
Heading Four
Heading Two
Heading Two with Colormark on Top
Heading Three
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
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
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
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
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Non massa enim vitae duis mattis.
|
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.
- Ultrices praesent amet
- Ipsum justo massa
- 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.
- Ultrices praesent amet
- Ipsum justo massa
- 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.
- Ultrices praesent amet
- Ipsum justo massa
- 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.
- Ultrices praesent amet
- Ipsum justo massa
- 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
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.
- Ultrices praesent amet
- Ipsum justo massa
- 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.
- Ultrices praesent amet
- Ipsum justo massa
- Eu dolor aliquet risus gravida nunc
Left-aligned, 1/3 width image followed by a Text component
Right-aligned, half width image followed by a Text component
Timeline
template-parts/organisms/flexible-components/timeline/display/timeline--display
Quiz
template-parts/organisms/flexible-components/quiz/display/quiz--display
Image
template-parts/organisms/flexible-components/single-image/display/single-image--display
Video
template-parts/organisms/flexible-components/video/display/video--display
YouTube
template-parts/organisms/flexible-components/youtube/display/youtube--display
Social: Share
template-parts/molecules/social--share
Social Share