Content and editor blocks

The smallest group here, and the one with the most surface per block: an editor, a code window, a gallery and a disclosure. What they have in common is that the content is the interface — the block's job is to get out of its way.

4 families, 19 blocks

What these are for

An editor is the most demanding component most products ever ship. Selection, paste from elsewhere, undo across composite actions, mobile keyboards, and a toolbar whose state has to follow the cursor — all of it happening in a surface the reader is typing into. The editor blocks here cover the composition and the toolbar states; the document model underneath stays yours, because it belongs to whatever you are storing.

Code snippets look decorative and are not: they are read by people who will copy and run them. What matters is that the copy button copies exactly what is on screen, that horizontal scrolling is visible when a line is long rather than hidden, and that highlighting does not change what the text says. Every code block here scrolls with a visible bar for exactly that reason.

Accordions and carousels both hide content behind an interaction, and both are worth suspicion. Content behind a click is content most readers will not see, which is fine for a set of questions where each reader wants one, and actively harmful for anything you need them to read. The block is well built; the judgement about whether to use it is yours.

Choosing between them

Accordion or just showing everything?

Show everything unless the list is long and each reader wants one item from it. A pricing FAQ is the right case: ten questions, each reader has one. A three-paragraph explanation split into three accordion panels is the wrong case — you have added a click before every paragraph and hidden two thirds of the page from anyone scanning it, including a reader who would have found their answer by looking.

Carousel or a grid?

A grid, almost always. Items past the first slide of a carousel are seen by a small fraction of readers, so a carousel is a way of publishing content and then hiding most of it. It earns its place where the items are genuinely alternatives to each other and space is genuinely short — product photographs of one item, a phone-width gallery — and not as a way of fitting six equally important things into the space for two.

Rich editor or plain text area?

Ask whether formatting changes the meaning of what is being written. A comment, a status update or a search prompt does not need bold, and offering it invites readers to spend time on decoration in a field nobody will read twice. A document, an article or a knowledge-base entry does, and a plain text area for one of those turns into somebody inventing a markup convention of their own.

Questions

Which editor engine does the rich editor use?

The blocks cover the composition — the toolbar, its states, the body surface, the comment composer — rather than shipping a document model. That is deliberate: the model belongs with your storage and your collaboration choices, and a block that dictated it would be wrong for any project that had already chosen.

Is the code block's highlighting configurable?

The palette is token-based like everything else here, so highlighting follows your theme rather than carrying its own. The blocks cover the window chrome, the copy affordance and the line numbering; which grammar tokenises the source is yours to pass in.

Are the carousels accessible?

They are keyboard-reachable, they announce position, and they do not move on their own, which is the single most important property — an auto-advancing carousel moves content out from under anyone reading slowly, using a screen reader, or operating it by keyboard. If you need motion, it belongs on a control the reader pressed.

The other categories

All documentation

All components

Actions
ButtonLink ButtonGhost ButtonFancy ButtonCompact ButtonButton Group
Displaying Data
AvatarsAvatar GroupAvatar Compact GroupBadgesTagFancy TagData TableContent DividerKBDLine Progress BarCircular Progress BarRating
Feedback
Alert & NotificationTooltipBanner
Form
CheckboxRadioColor PickerDate PickerOTP InputFile UploadHintInputLabelDropdownSliderSwitchText Area
Layout
AccordionBreadcrumbSegmented ControlTab Menu HorizontalTab Menu Vertical
Navigation
Dot StepperPaginationNavbar
Overlays
Command MenuModalPopover