Limit long text to a number of lines while offering a toggle button to reveal all the content.
Use expand text when you'd prefer to prevent very long text from taking over the page and making the layout look off, while still allowing a visitor to access the long content.
You may not want to offer access to very long text in situations where you're previewing content. For example, if you're rendering titles in search results, consider CSS line-clamp for those, and save the expand text pattern for the full record page where a visitor can get the full content.
Wrap any whole section of text. It works inside headings, paragraphs, or any other flow content.
Expand appears when the text meaningfully overflows. Short text or text that barely overflows the line threshold does not expand.
<div class="pl-reset pl-typeset pl-margin-l pl-flex pl-flex-col pl-gap-m">
<h1>
<pennlibs-expand-text lines="2">
This heading expands. Nuevo y curioso romance, en que se declara lo que les sucedió á dos finos amantes llamados don Jacinto del Castillo, y doña Leonor de la Rosa : los cuales se embarcaron para Venecia y en medio de la mar fuéron apresados por unos cosarios argelinos, que dieron con ellos en la ciudad de Argel, donde fuéron quemados por la fe de Jesucristo
</pennlibs-expand-text>
</h1>
<p>
<pennlibs-expand-text>
This content does not expand.
</pennlibs-expand-text>
</p>
<p>
<pennlibs-expand-text>
This content does expand. The legacy of extraordinary contralto Marian Anderson is not limited to her musical genius. She performed a repertoire that included over 200 songs and arias in German, Italian, English, French, Spanish, Portuguese, Swedish, Finnish, and other languages. A review of her concert in Los Angeles on 16 June 1931 suggests something of the power of her stage presence:(, 17 June 1931). As a singer and as a symbol of progress in the advancement of civil rights in the twentieth century, Marian Anderson was perceived as larger-than-life, yet her approach to her life and career was practical and modest, with a deep understanding that nothing is accomplished without the assistance of others. Her career spanned the years from the early 1920s through the 1970s, although she formally retired from singing in 1965. Anderson's audiences in the United States would return year after year to her concerts. She was equally well received around the world, from her triumphs in the cities of Europe and South America at the height of her career in the 1930s to her tours of Asia for the United States Department of State in the 1950s. A strong believer in education as a key to racial and social equality and having a deep commitment to the well-being of children, she spent her retirement on the boards of dozens of non-profit organizations devoted to these causes. Childhood and Education On 27 February 1897 Marian Anderson was born at her parents' home at 1833 Webster Street in South Philadelphia. (Anderson's date of birth is from her birth certificate. On her passports and driver's license she gave her birth date as 27 February 1903.) Her father, John Berkeley Anderson--tall, good-looking, and popular--was remembered by neighbors as a fine singer. Her mother, Anna Delilah Rucker Anderson--small in stature, modest, and with a strong faith in God--had been a school teacher in her home town of Lynchburg, Virginia. Marian was born in a neighborhood that was the heart of African-American intellectual and social life in Philadelphia, and she grew up knowing many prominent families and individuals there, including Raymond Pace Alexander, J. C. Asbury, Dr. Henry Minton, Evelyn and Hobson Reynolds, Arthur Huff Fauset, Crystal Bird Fauset, and Bishop L. J. Coppin. Predominantly, it was a poor but vibrant neighborhood, home to Irish, Italian, and Jewish immigrants as well as African Americans moving from the rural southeastern states for job opportunities in the city. Marian played and went to school with children from varied backgrounds
</pennlibs-expand-text>
</p>
</div>
Use the outline button variant on a background color, where the default button's subtle fill would disappear. Set --pl-expand-text-fade-bg to the same color, so the trailing fade blends into the band rather than the page.
<div class="pl-reset pl-typeset pl-padding-l" style="background: var(--pl-color-bg-subtle); --pl-expand-text-fade-bg: var(--pl-color-bg-subtle);">
<h1>
<pennlibs-expand-text lines="2" variant="outline">
Records of the Philadelphia General Hospital Committee on the Celebration at the Philadelphia General Hospital of the 200th Anniversary of the building of the Philadelphia Almshouse
</pennlibs-expand-text>
</h1>
<p>
<pennlibs-expand-text variant="outline">
The Committee on the Celebration at the Philadelphia General Hospital of the 200th Anniversary of the Building of the Philadelphia Almshouse was established in September 1929. The committee, consisting of five members of the Medical Board of the Philadelphia General Hospital, was appointed by the President of the Medical Board. The committee was responsible for fund raising, promotion, planning the program, selecting speakers, and making out the guest list. The bicentennial celebration was initially planned for December 1931. In August 1931, due to lack of funds, the committee decided to postpone the celebration until the following year. The bicentennial was finally celebrated on 6 December 1932. The records of the Committee on the Celebration at the Philadelphia General Hospital of the 200th Anniversary of the Building of the Philadelphia Almshouse span 1929 to 1939; most of the records date from 1931 to 1932. The collection consists of the files of Robert J. Hunter, chairman of the committee. Most of the files are correspondence files containing incoming letters and copies of Hunter's outgoing letters. The correspondence, which is primarily with other committee members, concerns the planning and organization of the bicentennial celebration held at the Philadelphia General Hospital in December 1932. Also included are regret and acceptance letters from people who were invited to the celebration.
</pennlibs-expand-text>
</p>
</div>
| Attribute | Description | Type | Default |
|---|---|---|---|
collapse-label | Label for the toggle when content is expanded. | string | 'Less' |
expand-label | Label for the toggle when content is collapsed. | string | 'More' |
lines | Maximum number of lines to show before truncating. | number | 3 |
variant | Visual style of the More/Less toggle. default is a subtle-filled chip; outline is an outlined pill (like the feedback buttons) that stays legible
on a subtle-colored band. | "default" | "outline" | 'default' |
| Slot | Description |
|---|---|
| The content to truncate. Accepts any flow content. |
| Name | Description |
|---|---|
--pl-expand-text-fade-bg | Color the trailing fade behind the button blends into. Set this to match the surrounding background (defaults to the page background, --pl-color-bg-default). |