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

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

Gender Identity Removed from Iowa Civil Rights Act

A new law goes into effect that heartlessly removes gender identity from the Iowa Civil Rights Act. No one knows the full impact of this change. The courts and impacted Iowans will have to sort that out in the years to come. However, other important protections remain in place for transgender Iowans.

Iowa Supreme Court Leaves Intact Ruling that Upholds Medicaid Coverage For Transgender Iowans

The Iowa Supreme Court left intact a district court’s ruling requiring coverage for medically necessary gender-affirming care in Iowa’s Medicaid program in our lawsuit brought on behalf of Mika Covington and Aiden Vasquez.

It stemmed from a November 2021 district court order (see below) that, rightly, required coverage of medically necessary, gender-affirming surgery to transgender Iowans in Medicaid. In addition, the court ordered the state to strike the discriminatory Medicaid rule barring coverage and stop using it to deny pre-authorization of gender affirming care. Through the litigation, Mika and Aiden were able to get the preapproval they needed for gender-affirming care.

The state appealed to the Iowa Supreme Court the portion of the decision that addressed the constitutionality of a 2019 law that amended the Iowa Civil Rights Act to take away the nondiscrimination protections under that statute covering transgender Iowans on Medicaid. That issue is important because the Iowa Civil Rights Act provides important additional rights and remedies on top of the Iowa Constitution.

Iowa Supreme Court Upholds Historic Transgender Rights Verdict

The Iowa Supreme Court upholds a $120,000 jury award and finds that the State had unlawfully discriminated against former transgender employee Jesse Vroegh by (1) denying him the use of the men’s restroom and locker rooms; and (2) by providing an employee health insurance plan that denied coverage for medically necessary gender-confirmation surgery.

Iowa District Court Rules Law Denying Medicaid Coverage for Transgender Iowans Is Unconstitutional

In the Medicaid lawsuit by Mika Covington and Aiden Vasquez, the court ordered the state to stop its practice of denying coverage of medically necessary, gender-affirming surgery to transgender Iowans in Medicaid. This order remains in place.

ACLU of Iowa Files New Lawsuit to Secure Access to Gender-Affirming Surgery Through Medicaid

The state denies Medicaid coverage to Mika and Aiden. The ACLU of Iowa then files a new lawsuit to stop the state’s practice of denying Medicaid coverage of medically necessary, gender-affirming surgery to transgender Iowans.

Iowa Court of Appeals Dismisses ACLU of Iowa Lawsuit

The Iowa Court of Appeals ruled that Mika and Aiden had not shown that Iowa Medicaid actually denied them coverage and that they must actually be denied the coverage before proceeding with a lawsuit.

ACLU of Iowa Files Lawsuit to Block Iowa Law Preventing Medicaid Coverage For Transgender Iowans

Just weeks after the Iowa Legislature passed a bill to amend the Iowa Civil Rights Act to remove transgender protections, the ACLU of Iowa filed a lawsuit on behalf of transgender clients and Medicaid patients Mika Covington and Aiden Vasquez. The lawsuit sought to block the new, discriminatory law.

Iowa Legislature Passes Bill to Stop Medicaid Coverage For Transgender Iowans

The Iowa Legislature, seeking to undo the Iowa Supreme Court decision, passed a bill that would amend the Iowa Civil Rights Act to remove protections against discrimination for transgender people who rely on Medicaid in public accommodations.

The new law would allow government entities to opt out of using public insurance dollars, including Medicaid, to pay for transition-related surgeries. Iowa Medicaid once again started enforcing its discriminatory ban against transgender Iowans, despite the prior injunction.

Iowa Supreme Court Rules that Iowa’s Medicaid Program May Not Discriminate Against Transgender People

The Iowa Supreme Court upheld the injunction and ruled in favor of Carol Ann and EerieAnna again, addressing the lawsuit's Iowa Civil Rights Act claim but not ruling on its Iowa Constitutional claim.

Polk County Jury Delivers Historic Win for Transgender Rights in Iowa

In 2019, a Polk County District Court jury rules in favor of Jesse Vroegh, awarding him $120,000 in damages. It finds that the state had engaged in sex and gender identity discrimination, which is prohibited by the Iowa Civil Rights Act. It also finds that the State of Iowa’s health insurance plan for its employees violated the Iowa Civil Rights Act by explicitly excluding coverage for medically necessary gender-affirming surgery.

ACLU of Iowa Wins Lawsuit to Secure Equality in Medicaid Coverage For Transgender Iowans

The Polk County District Court rules in favor of Carol Ann and EerieAnna, and blocks the Iowa Medicaid ban under the Iowa Constitution’s equal protection guarantee and the Iowa Civil Rights Act. The state appeals.

ACLU of Iowa Files Lawsuit to Secure Equality in Medicaid Coverage for Transgender Iowans

The ACLU of Iowa files a lawsuit on behalf of transgender clients Carol Ann Beal and EerieAnna Good to block an Iowa Medicaid ban on coverage of medically necessary gender-affirming surgery.

ACLU of Iowa Files Historic Transgender Rights Lawsuit

The ACLU of Iowa files the first transgender rights lawsuit brought under the Iowa Civil Rights Act on behalf of Jesse Vroegh.

ACLU of Iowa Files Civil Rights Complaint for Transgender Iowan

The ACLU of Iowa files a civil rights complaint on behalf of Jesse Vroegh. Vroegh, an Iowa nurse, was denied use of the men's restrooms and locker rooms solely because he is transgender by his then-employer, the Iowa Department of Corrections. It also denied him health care coverage for medically necessary treatment and procedures, even though the DOC provided coverage for similar procedures for non-transgender employees.


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