COMPONENTS / ATOMS / al-text-block← ALL COMPONENTS

Text Block

<al-text-block><ALTextBlock> REACTbetaOPEN IN FIGMA ↗

Reference generated from the custom elements manifest — 1 properties, 1 slots, 0 events.

PLAYGROUND0 CONTROLS
PREVIEW / al-text-block / ALTITUDE
Loading preview

Heading 1

A text passage contains arbitrary text that might come from a CMS. It should live within a container that caps the line length of the text to avoid a straining reading experience.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ex commodo egestas aenean leo orci deserunt excepteur minim, ultrices adipiscing labore. Officia ullamco sunt ex ipsum auctor laborum, egestas turpis mollit ipsum est. Varius varius esse cupidatat congue, reprehenderit eu porttitor sagittis feugiat exercitation fugiat quis.

  • Here is a unordered list item
  • Here is a unordered list item
  • Here is a unordered list item
  • Here is a unordered list item

Heading 3

  1. Here is a unordered list item
  2. Here is a unordered list item
  3. Here is a unordered list item
  4. Here is a unordered list item

laboris ut mollit quis laborum, Duis incididunt laborum commodo reprehenderit curabitur, eiusmod esse dui egestas convallis anim turpis. Laborum minim sint minim aute, varius egestas lacinia.

This is a quotation from something.

Cite source

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ea condimentum elit gravida duis non varius, auctor duis a a convallis. Officia est dolore sagittis, mauris sollicitudin fringilla ea aliquip. Sollicitudin sodales tellus vulputate dolore feugiat, tincidunt varius condimentum lorem do nulla.

Sodales porttitor nulla odio lacus consectetur, commodo mauris laboris aenean qui phasellus varius pretium.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Congue porttitor commodo laborum, quis interdum exercitation sed officia. Ultrices non interdum fringilla lorem vestibulum, elit occaecat vitae ut nulla.

That is all.

Download now
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYALTITUDE DESIGN SYSTEM
CODE AHEADAltitude Design SystemFIGMA SET · Text Block1 PROPERTY DIFFFROM TRACKED PROJECTION
The component changed since the last confirmed sync — the Figma set is behind.
DECIDED BY
SOURCE HASH
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-22
PUBLIC SURFACE
1 ATTR · 1 SLOT · 0 EVENT · 0 PART
A sha1 of every .ts/.scss byte in the component directory, compared against the hash stored at the last sync. It cannot say what changed, and a comment edit moves it. Re-stamping this component records a contract digest instead.
PROPERTYDISAGREEMENTCODE / CANVAS
theme/color/content/neutral-default[token-binding] missing-in-code— / theme/color/content/neutral-default
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEtext-block--DefaultPASS
Advanced statesAXE1 further storyPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
MEASURED 2026-09-08 · 2 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 2 STORIES.
INSTALL@southleft/al-web-components/components/text-block
import '@southleft/al-web-components/components/text-block';
import { ALTextBlock } from '@southleft/al-react';
API — 1 PROPS1 DOCUMENTED
PROPTYPEDEFAULT
maxWidth'sm'Prevents the text passage from expanding full width
- **sm** Add a max width of --al-theme-layout-max-width-sm—
SLOTS1
SLOTDESCRIPTION
(default)The text passage content
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS CUSTOM PROPERTIES1
PROPERTYDESCRIPTIONDEFAULT
--al-text-block-fontThe block's base typography, as a `font` shorthand. Defaults to body-md. Needed because that default compiles to a `font` shorthand, which resets `font-size`/`line-height` and so cannot be overridden by inheritance from the host — pass a typography token (e.g. `var(--al-theme-typography-body-lg)`) to set lead copy.—
SOURCE — components/text-block/text-block.ts · Atoms/Text/Text Block