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
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 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.
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
global/template-parts/molecules/breadcrumbs
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.
Section Title
This is a description for the section title.
Button with Modal (mobile only)
global/template-parts/molecules/btn-with-modal
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
Form: Search
global/template-parts/molecules/form-search
Jump Links
global/template-parts/molecules/jumplinks
Pagination
global/template-parts/molecules/pagination
(coming soon)
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: Custom links
global/template-parts/molecules/social--custom-links
Card: Person Author
global/template-parts/molecules/card--author
Card: Person - minimal
global/template-parts/molecules/card--person-minimal
Card: Person
global/template-parts/molecules/card--person
Card: Person - full bio
global/template-parts/molecules/card--person-full-bio
Role Type
Person Name
Pronouns: she/her
Title
Department
Organization
Card: Common
global/template-parts/molecules/card--common
Card: Featured
global/template-parts/molecules/card--featured
Card title
Card: News
global/template-parts/molecules/card--news
Card: News (md)
global/template-parts/molecules/card--news-md
Card: Press Release
global/template-parts/molecules/card--press-release
Card: Spotlight
global/template-parts/molecules/card--spotlight
Card: Listing News small
global/template-parts/molecules/card--listing--news-sm
Card: Listing
global/template-parts/molecules/card--listing
Card: Listing News
global/template-parts/molecules/card--listing--news
Card: Listing Press
global/template-parts/molecules/card--listing--press
Card title
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: Featured Content
global/template-parts/organisms/components/cards--featured/display/cards--featured--display
Featured
Content Title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.
Card title
Card title
Cards: Featured Case/Legislation
global/template-parts/organisms/components/cards--featured-case-legislation/display/cards--featured-case-legislation--display
Cards: Small Date First Listing
global/template-parts/organisms/components/cards--listing--date-first--small/display/cards--listing--date-first--small--display
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.
Cards: Person (minimal)
global/template-parts/organisms/components/cards--person-minimal/display/cards--person-minimal--display
Person (minimal)
Carousel: Action Cards
global/template-parts/organisms/components/carousel--action/display/carousel--action--display
Take Action
CTA: Email Capture
global/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
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.
Hero: Title on Color
global/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
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.
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
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:
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
global/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
global/template-parts/organisms/components/hero--legislation-detail/display/hero--legislation-detail--display
Hero: Podcast Detail
global/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
global/template-parts/organisms/components/hero--overlay/display/hero--overlay--display
Be Known: Supporting Black and LGBTQ+ Communities
Hero: Sidebar
global/template-parts/organisms/components/hero--sidebar/display/hero--sidebar--display
Hero: Sidebar Bio
global/template-parts/organisms/components/hero--sidebar-bio/display/hero--sidebar-bio--display
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
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
Content Link
global/template-parts/organisms/flexible-components/content-link/display/content-link--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
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
global/template-parts/organisms/flexible-components/iframe/display/iframe--display
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
global/template-parts/organisms/flexible-components/instagram/display/instagram--display
Migrated Content
global/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
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.
- 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
global/template-parts/organisms/flexible-components/podcast/display/podcast--display
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.
- 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
global/template-parts/organisms/flexible-components/timeline/display/timeline--display
Quiz
global/template-parts/organisms/flexible-components/quiz/display/quiz--display
Social: Share
global/template-parts/molecules/social--share
Social Share