> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. # CSS selectors reference > Reference guide for all CSS selectors available in Fern docs. Customize layouts, navigation, buttons, forms, accordions, badges, API components, and more. Fern selectors use Tailwind CSS utilities and CSS custom properties. This page is a reference of the stable `fern-*` selectors for customizing your documentation site. ## Layout and structure Selectors for page layout, backgrounds, and headings. #### .fern-background-image Fixed background image. **`Default CSS`** ```css Default CSS .fern-background-image { background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position-x: center; background-position-y: center; } ``` #### .fern-page-heading Primary page heading (h1). **`Default CSS`** ```css Default CSS .fern-page-heading { margin-top: 0; margin-bottom: 0; display: inline-block; leading-tight: 1.25; text-wrap: balance; word-wrap: break-word; } ``` #### .fern-layout-page Page layout container. **`Default CSS`** ```css Default CSS .fern-layout-page { max-width: var(--page-width-padded); padding-left: var(--page-padding); padding-right: var(--page-padding); margin-left: auto; margin-right: auto; min-width: 0; flex: 1 1 0%; min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; } ``` #### .fern-layout-guide Guide page layout. **`Default CSS`** ```css Default CSS .fern-layout-guide { padding-left: var(--page-padding); padding-right: var(--page-padding); margin-left: auto; margin-right: auto; margin-bottom: 3rem; min-width: 0; flex-shrink: 1; min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; } ``` #### .fern-layout-reference API Reference layout with two-column grid. **`Default CSS`** ```css Default CSS .fern-layout-reference { padding-left: var(--page-padding); margin-left: auto; margin-right: auto; min-width: 0; flex-shrink: 1; padding-right: calc(var(--page-padding) + var(--aside-offset)); min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; } .fern-layout-reference-content { margin-top: 1.5rem; margin-bottom: 1.5rem; } @media (min-width: 768px) { .fern-layout-reference-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media (min-width: 1024px) { .fern-layout-reference-content { gap: 3rem; } } ``` #### .fern-layout-overview Overview page layout. **`Default CSS`** ```css Default CSS .fern-layout-overview { padding-left: var(--page-padding); padding-right: var(--page-padding); margin-left: auto; margin-right: auto; margin-bottom: 3rem; min-width: 0; flex-shrink: 1; min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; } ``` #### .fern-layout-changelog Changelog page layout. **`Default CSS`** ```css Default CSS .fern-layout-changelog[data-aside-state="hidden"] { max-width: var(--page-width-padded); padding-left: var(--page-padding); padding-right: var(--page-padding); margin-left: auto; margin-right: auto; min-width: 0; } .fern-layout-changelog[data-aside-state="visible"] { padding-left: var(--page-padding); padding-right: var(--page-padding); margin-left: auto; margin-right: auto; margin-bottom: 3rem; min-width: 0; flex-shrink: 1; } ``` ## Header components Selectors for the site header, tabs, and mobile menu. #### #fern-header Site header container. **`Default CSS`** ```css Default CSS #fern-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; pointer-events: auto; border-bottom: 1px solid var(--border-concealed); background-color: var(--header-background); backdrop-filter: blur(16px); } ``` #### .fern-header-tabs Header navigation tabs (desktop only). **`Default CSS`** ```css Default CSS .fern-header-tabs { backdrop-filter: blur(0.5rem); background-color: transparent; display: none; max-width: 100%; user-select: none; } @media (min-width: 1024px) { .fern-header-tabs { display: flex; align-items: center; justify-content: space-between; } } ``` #### .fern-header-logo-container Header logo container. **`Default CSS`** ```css Default CSS .fern-header-logo-container { position: relative; display: flex; height: 100%; min-width: fit-content; flex: 1 1 0%; flex-shrink: 0; gap: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } ``` #### .fern-header-search-bar Header search input (desktop only). **`Default CSS`** ```css Default CSS .fern-header-search-bar { display: none; width: 100%; min-width: 0; flex-shrink: 1; } @media (min-width: 1024px) { .fern-header-search-bar { display: inline-flex; } } ``` #### .fern-header-navbar-links Header navigation links container. **`Default CSS`** ```css Default CSS .fern-header-navbar-links { display: none; flex: 1 1 0%; } @media (min-width: 1024px) { .fern-header-navbar-links { display: flex; align-items: center; justify-content: flex-end; } } ``` #### .fern-header-mobile-menu-button Mobile menu toggle button. **`Default CSS`** ```css Default CSS .fern-header-mobile-menu-button { display: flex; flex: 1 1 0%; align-items: center; justify-content: flex-end; } ``` ## Sidebar components Selectors for sidebar navigation and tabs. #### .fern-sidebar-header Top of sidebar. **`Default CSS`** ```css Default CSS .fern-sidebar-header { height: var(--header-height); margin-left: 0.75rem; margin-right: 0.75rem; display: none; border-bottom: 1px solid transparent; } @media (min-width: 1024px) { .fern-sidebar-header { display: flex; align-items: center; justify-content: space-between; } } ``` #### .fern-sidebar-heading Sidebar section heading. **`Default CSS`** ```css Default CSS .fern-sidebar-heading { margin-bottom: 0.25rem; display: flex; min-height: 32px; align-items: center; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 1024px) { .fern-sidebar-heading { min-height: 36px; padding-left: 0.5rem; padding-right: 0.5rem; } } ``` #### .fern-sidebar-heading-content Sidebar heading text. **`Default CSS`** ```css Default CSS .fern-sidebar-heading-content { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5rem; } @media (min-width: 1024px) { .fern-sidebar-heading-content { font-size: 0.875rem; line-height: 1.25rem; } } ``` #### .fern-sidebar-link Sidebar link. **`Default CSS`** ```css Default CSS .fern-sidebar-link { color: var(--grayscale-a11); display: flex; width: 100%; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; text-align: left; font-size: 1rem; line-height: 1.25; transition-property: color, background-color; } @media (min-width: 1024px) { .fern-sidebar-link { border-radius: var(--radius-2); padding: 0.5rem; font-size: 0.875rem; } } .fern-sidebar-link:hover { color: var(--grayscale-a12); background-color: var(--grayscale-a3); transition: none; } .fern-sidebar-link[data-state="active"] { color: var(--accent-a11); background-color: var(--accent-a3); font-weight: 500; } ``` #### .fern-sidebar-link-title Sidebar link text. **`Default CSS`** ```css Default CSS .fern-sidebar-link-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .fern-sidebar-link-title.marquee-active { text-overflow: clip; } .fern-sidebar-link-title.wrap-mode { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; } ``` #### .fern-sidebar-link-title-inner Long title marquee animation. **`Default CSS`** ```css Default CSS .fern-sidebar-link-title-inner { display: inline; will-change: transform; transform: translateX(0); } .fern-sidebar-link-title-inner.is-marquee { display: inline-block; animation: fern-sidebar-marquee var(--marquee-duration, 4s) linear forwards; } @keyframes fern-sidebar-marquee { to { transform: translateX(var(--marquee-translate, 0)); } } ``` #### .fern-sidebar-group Grouped sidebar items. **`Default CSS`** ```css Default CSS .fern-sidebar-group { list-style: none; margin-left: -1rem; margin-right: -1rem; } @media (min-width: 1024px) { .fern-sidebar-group { margin-left: 0; margin-right: 0; } } .fern-sidebar-group .fern-sidebar-group { margin-left: 0; margin-right: 0; } ``` #### .fern-sidebar-tabs Sidebar tab navigation. **`Default CSS`** ```css Default CSS .fern-sidebar-tabs { margin-top: 1.25rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; list-style: none; } ``` ## Navigation components Selectors for breadcrumb navigation. #### .fern-breadcrumb Breadcrumb navigation. **`Default CSS`** ```css Default CSS .fern-breadcrumb { display: inline-flex; height: fit-content; max-width: 100%; flex-wrap: wrap; align-items: baseline; font-weight: 500; } ``` #### .fern-breadcrumb-item Breadcrumb link or text. **`Default CSS`** ```css Default CSS .fern-breadcrumb-item { color: var(--accent-a11); min-width: 0; flex-shrink: 1; font-size: 0.875rem; } ``` #### .fern-breadcrumb-arrow Breadcrumb separator. **`Default CSS`** ```css Default CSS .fern-breadcrumb-arrow { color: var(--grayscale-a9); margin-left: 0.125rem; margin-right: 0.125rem; width: 1rem; height: 1rem; align-self: center; } ``` ## Button components Selectors for buttons. #### .fern-button Button with variants. **`Default CSS`** ```css Default CSS .fern-button { transition-property: color, background-color; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-2); height: 2.5rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; cursor: pointer; } @media (min-width: 640px) { .fern-button { height: 2rem; } } .fern-button:hover { transition: none; } ``` **Variants:** * `.minimal` - Transparent background with subtle hover * `.filled` - Solid background color * `.outlined` - Border with transparent background * `.primary` - Accent color variant * `.success` - Green color variant * `.warning` - Amber color variant * `.danger` - Red color variant **Size modifiers:** * `.small` - Smaller button (height: 1.75rem on desktop, 1.5rem on mobile) * `.large` - Larger button (height: 2.75rem on desktop, 2.5rem on mobile) * `.square` - Square button with equal width and height #### .fern-button-content Button content wrapper. **`Default CSS`** ```css Default CSS .fern-button-content { display: inline-flex; min-width: 0; flex-shrink: 1; align-items: center; height: 1.5rem; gap: 0.375rem; } ``` #### .fern-button-text Button text. **`Default CSS`** ```css Default CSS .fern-button-text { min-width: 0; flex-shrink: 1; font-weight: 500; } .fern-button:not(.multiline) .fern-button-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` #### .fern-button-group Button group. **`Default CSS`** ```css Default CSS .fern-button-group { display: inline-flex; align-items: center; } .fern-button-group > .fern-button:has(+ .fern-button.outlined, + .fern-button.filled), .fern-button-group > .fern-button.outlined:has(+ .fern-button.minimal), .fern-button-group > .fern-button.filled:has(+ .fern-button.minimal) { margin-right: 0.5rem; } ``` #### .fern-copy-button Copy button for [code blocks](/learn/docs/writing-content/components/code-blocks). **`Default CSS`** ```css Default CSS .fern-copy-button { width: fit-content; height: fit-content; backdrop-filter: blur(8px); } ``` #### .fern-expand-button Expand button for [`maxLines` code blocks](/learn/docs/writing-content/components/code-blocks#max-height). **`Default CSS`** ```css Default CSS .fern-expand-button { width: fit-content; height: fit-content; backdrop-filter: blur(8px); } ``` #### .fern-page-actions Page action buttons (edit, feedback, share). **`Default CSS`** ```css Default CSS .fern-page-actions { display: flex; border-radius: var(--radius-2); border: 1px solid var(--border-default); } .fern-page-actions > *:not(:last-child) { border-right: 1px solid var(--border-default); margin-right: -1px; } ``` **Variants:** * `.fern-toolbar` - Removes the border styling for a toolbar-style appearance ## Card components Selectors for [cards](/learn/docs/writing-content/components/cards). #### .fern-card Card container. **`Default CSS`** ```css Default CSS .fern-card { color: var(--text-body); background-color: var(--card-background); border: 1px solid var(--border-default); box-shadow: 0 2px 4px var(--grayscale-a3); transition-property: all; } .fern-card:hover { color: var(--text-body); transition: none; } .fern-card.interactive:hover { box-shadow: 0 4px 8px var(--grayscale-a4); border-color: var(--accent-a9); } .fern-card.elevated { border-color: var(--accent-a9); box-shadow: 0 4px 12px var(--accent-a4); } ``` **Variants:** * `.interactive` - Adds hover effects * `.elevated` - Elevated appearance with accent border * `.active` - Active state styling ## Form components Selectors for form inputs and controls. #### .fern-input Text input. **`Default CSS`** ```css Default CSS .fern-input { width: 100%; border: none; background-color: transparent; outline: none; caret-color: var(--accent); padding: 0.5rem 0.625rem; font-size: 0.875rem; } @media (max-width: 640px) { .fern-input { font-size: 1rem; } } input.fern-input::-webkit-outer-spin-button, input.fern-input::-webkit-inner-spin-button { appearance: none; margin: 0; } input.fern-input[type="number"] { appearance: textfield; } ``` #### .fern-input-group Input container with focus ring. **`Default CSS`** ```css Default CSS .fern-input-group { display: flex; align-items: center; overflow: hidden; border-radius: var(--radius-2); background-color: white; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); border: 1px solid var(--border-default); height: 2.5rem; } @media (prefers-color-scheme: dark) { .fern-input-group { background-color: var(--grayscale-a2); } } @media (min-width: 640px) { .fern-input-group { height: 2rem; } } .fern-input-group:focus-within { outline: none; border-color: var(--accent-a5); box-shadow: 0 0 0 2px var(--accent-a5); } .fern-input-group.error { background: rgba(252, 100, 100, 0.63); } ``` #### .fern-input-icon Input icon. **`Default CSS`** ```css Default CSS .fern-input-icon { display: flex; align-items: center; justify-content: center; height: 100%; width: 2rem; flex-shrink: 0; } .fern-input-icon + .fern-input { margin-left: -2rem; padding-left: 2rem; } ``` #### .fern-input-right-element Right-side input element. **`Default CSS`** ```css Default CSS .fern-input-right-element { display: flex; align-items: center; justify-content: center; margin-left: -0.5rem; height: 100%; min-width: 2rem; flex-shrink: 0; padding-left: 0; padding-right: 0; } ``` #### .fern-input-clear-button Input clear button. **`Default CSS`** ```css Default CSS .fern-input-clear-button { display: flex; align-items: center; justify-content: center; color: var(--grayscale-a9); width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin-right: 0.25rem; cursor: pointer; border: none; background-color: transparent; transition: color 0.15s; } .fern-input-clear-button:hover { color: var(--grayscale-a11); } ``` #### .fern-textarea Multi-line text input. **`Default CSS`** ```css Default CSS .fern-textarea { width: 100%; resize: none; border: none; background-color: transparent; outline: none; caret-color: var(--accent); padding: 0.5rem 0.625rem; font-size: 0.875rem; } @media (max-width: 640px) { .fern-textarea { font-size: 1rem; } } ``` #### .fern-textarea-group Textarea container. **`Default CSS`** ```css Default CSS .fern-textarea-group { display: flex; align-items: center; overflow: hidden; border-radius: var(--radius-2); background-color: white; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); border: 1px solid var(--border-default); } @media (prefers-color-scheme: dark) { .fern-textarea-group { background-color: var(--grayscale-a2); } } .fern-textarea-group:focus-within { outline: none; border-color: var(--accent-a5); box-shadow: 0 0 0 2px var(--accent-a5); } ``` #### .fern-checkbox-label Checkbox label. **`Default CSS`** ```css Default CSS .fern-checkbox-label { display: flex; cursor: pointer; } ``` #### .fern-checkbox-item Checkbox input. **`Default CSS`** ```css Default CSS .fern-checkbox-item { border-radius: var(--radius-1); position: relative; margin-top: 0.125rem; display: inline-block; width: 1rem; height: 1rem; border: 1px solid var(--border-default); } .fern-checkbox-item:hover { background-color: var(--accent-a3); } .fern-checkbox-item:focus { outline: 4px solid var(--accent-a3); outline-offset: 0; } ``` #### .fern-checkbox-indicator Checked indicator. **`Default CSS`** ```css Default CSS .fern-checkbox-indicator { background-color: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-1); display: flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; } ``` #### .fern-radio-group Radio button group. **`Default CSS`** ```css Default CSS .fern-radio-group { display: flex; flex-direction: column; gap: 1rem; } .fern-radio-group.compact { gap: 0.5rem; font-size: 0.875rem; } ``` #### .fern-radio-label Radio label. **`Default CSS`** ```css Default CSS .fern-radio-label { display: flex; cursor: pointer; } ``` #### .fern-radio-item Radio button input. **`Default CSS`** ```css Default CSS .fern-radio-item { border: 1px solid var(--border-default); position: relative; margin-top: 0.125rem; display: inline-block; width: 1rem; height: 1rem; border-radius: 9999px; } .fern-radio-item:hover { background-color: var(--accent-a3); } .fern-radio-item:focus { outline: 4px solid var(--accent-a3); outline-offset: 0; } ``` #### .fern-radio-indicator Selected indicator. **`Default CSS`** ```css Default CSS .fern-radio-indicator { background-color: var(--accent); display: flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; border-radius: 9999px; } .fern-radio-indicator::after { background-color: var(--background); position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 9999px; content: ""; } ``` #### .fern-segmented-control Segmented toggle control. **`Default CSS`** ```css Default CSS .fern-segmented-control { border-radius: var(--radius-3/2); height: 2.25rem; background-color: white; display: flex; align-items: center; gap: 1px; padding: 0.125rem; border: 1px solid var(--border-default); } @media (prefers-color-scheme: dark) { .fern-segmented-control { background-color: rgba(255, 255, 255, 0.05); } } .fern-segmented-control .fern-button { border-radius: var(--radius-1); min-width: 0; flex-shrink: 1; } ``` #### .fern-numeric-input-group Numeric input with stepper buttons. **`Default CSS`** ```css Default CSS .fern-numeric-input-group { display: flex; align-items: center; overflow: hidden; border-radius: var(--radius-2); background-color: white; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); border: 1px solid var(--border-default); height: 2.5rem; } @media (min-width: 640px) { .fern-numeric-input-group { height: 2rem; } } .fern-numeric-input-group:focus-within { outline: none; border-color: var(--accent-a5); box-shadow: 0 0 0 2px var(--accent-a5); } ``` #### .fern-numeric-input-step Numeric input stepper button. **`Default CSS`** ```css Default CSS .fern-numeric-input-group .fern-numeric-input-step { border-color: var(--border-default); height: 100%; border-radius: 0; } .fern-numeric-input-group .fern-numeric-input-step:first-child { border-top-left-radius: var(--radius-3/2); border-bottom-left-radius: var(--radius-3/2); border-right: 1px solid; } .fern-numeric-input-group .fern-numeric-input-step:last-child { border-top-right-radius: var(--radius-3/2); border-bottom-right-radius: var(--radius-3/2); border-left: 1px solid; } .fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled) { color: var(--accent-a11); border-color: var(--accent-a5); } .fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled):hover { color: var(--accent-a11); background-color: var(--accent-a3); } ``` ## Dropdown and selection components Selectors for dropdowns and the [product selector](/learn/docs/configuration/products). #### .fern-dropdown Dropdown menu container. **`Default CSS`** ```css Default CSS .fern-dropdown { position: relative; z-index: 50; animation: popover-in 150ms ease-out; min-width: var(--radix-dropdown-menu-trigger-width); background-color: var(--background); border: 1px solid var(--border-default); border-radius: var(--radius-2); display: flex; max-height: 300px; flex-direction: column; backdrop-filter: blur(8px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); } ``` #### .fern-dropdown-item Dropdown menu item. **`Default CSS`** ```css Default CSS .fern-dropdown-item { border-radius: var(--radius-1); display: flex; width: 100%; cursor: default; align-items: center; justify-content: flex-start; padding: 0.25rem 0.5rem; text-align: left; font-size: 0.875rem; } .fern-dropdown-item[data-highlighted] { color: var(--accent-contrast); background-color: var(--accent); } ``` #### .fern-dropdown-item-indicator Dropdown selection indicator. **`Default CSS`** ```css Default CSS .fern-dropdown-item-indicator { margin-right: 0.25rem; display: flex; height: 100%; width: 1rem; flex: none; align-items: center; justify-content: center; } ``` #### .fern-selection-item Selection item. **`Default CSS`** ```css Default CSS .fern-selection-item { border-radius: var(--radius-3/2); display: flex; flex: 1 1 0%; cursor: pointer; align-items: center; justify-content: space-between; gap: 0.5rem; border: 1px solid transparent; padding: 0.25rem 0.625rem 0.25rem 0.25rem; width: 100%; text-align: left; transition: all 200ms ease-in-out; } .fern-selection-item:hover { color: var(--accent); background-color: var(--grayscale-a3); } ``` #### .fern-selection-item-icon Selection item icon. **`Default CSS`** ```css Default CSS .fern-selection-item-icon { border-radius: var(--radius-2); color: var(--grayscale-a11); margin: 0.25rem; display: flex; height: 56px; width: 56px; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; } .fern-selection-item-icon.use-icon { border: 1px solid var(--grayscale-a5); padding: 0.25rem; } .fern-selection-item-icon svg, .fern-selection-item-icon .fern-file-icon { display: block; height: 50%; width: 50%; transition: all 300ms ease-in-out; } .fern-selection-item:hover .fern-selection-item-icon svg, .fern-selection-item:hover .fern-selection-item-icon .fern-file-icon { transform: scale(1.2); } .fern-selection-item.dense .fern-selection-item-icon { margin: 0.125rem; height: 36px; width: 36px; padding: 0.125rem; } ``` #### .fern-selection-item-title Selection item title. **`Default CSS`** ```css Default CSS .fern-selection-item-title { color: var(--grayscale-a12); font-weight: 700; line-height: 1.25; } @media (min-width: 1024px) { .fern-selection-item-title { font-size: 0.875rem; } } ``` #### .fern-selection-item-end-icon Selection item end icon. **`Default CSS`** ```css Default CSS .fern-selection-item-end-icon { color: var(--grayscale-a11); } ``` #### .fern-product-selector Product selector. See [`styles.css`](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css) for examples. **`Default CSS`** ```css Default CSS .fern-product-selector { width: 100%; } @media (min-width: 1024px) { .fern-product-selector { width: auto; } } ``` #### .fern-product-selector-radio-group Product selector radio group. See [`styles.css`](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css) for examples. ## Accordion components Selectors for [accordions](/learn/docs/writing-content/components/accordions). #### .fern-accordion Accordion container. **`Default CSS`** ```css Default CSS .fern-accordion { border-radius: var(--radius-3); border-top: 1px solid var(--border-default); } .fern-accordion li { list-style-position: outside; } ``` #### .fern-accordion-item Accordion item. **`Default CSS`** ```css Default CSS .fern-accordion-item { overflow: hidden; } .fern-accordion-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .fern-accordion-item:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } ``` #### .fern-accordion-trigger Expand/collapse trigger. **`Default CSS`** ```css Default CSS .fern-accordion-trigger { display: flex; cursor: pointer; align-items: center; gap: 0.75rem; border-radius: inherit; padding: 1rem; transition-property: background-color; list-style: none; overflow: auto; } .fern-accordion-trigger:hover { background-color: var(--grayscale-a2); transition: none; } .fern-accordion-trigger[data-state="open"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .fern-accordion-trigger::-webkit-details-marker { display: none; } ``` #### .fern-accordion-trigger-arrow Expand/collapse arrow. **`Default CSS`** ```css Default CSS .fern-accordion-trigger-arrow { color: var(--grayscale-a11); width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } .fern-accordion-trigger[data-state="open"] .fern-accordion-trigger-arrow { transform: rotate(90deg); } ``` #### .fern-accordion-trigger-title Accordion trigger title. **`Default CSS`** ```css Default CSS .fern-accordion-trigger-title { color: var(--text-body); margin: 0; margin-bottom: -1px; display: flex; max-width: max-content; text-align: left; font-size: 1rem; line-height: 1.5rem; } .fern-accordion-trigger-title p { margin: 0 !important; padding: 0 !important; line-height: inherit !important; } ``` ## Scroll area components Selectors for scrollable areas. #### .fern-scroll-area Scrollable area container. **`Default CSS`** ```css Default CSS .fern-scroll-area { z-index: 0; display: flex; height: 100%; width: 100%; flex-direction: column; overflow: hidden; } ``` #### .fern-scroll-area-viewport Scroll viewport. **`Default CSS`** ```css Default CSS .fern-scroll-area-viewport { display: flex; height: 100%; min-height: 0; width: 100%; flex-shrink: 1; flex-direction: column; border-radius: inherit; } .fern-scroll-area-viewport:has(.fern-scroll-area-scrollbar[data-orientation="horizontal"]) { overscroll-behavior-x: contain; } .fern-scroll-area-viewport > div { display: block !important; flex-grow: 1; } .fern-scroll-area-viewport[data-scrollbars="vertical"] > div { max-width: 100%; } ``` #### .fern-scroll-area-scrollbar Scrollbar. **`Default CSS`** ```css Default CSS .fern-scroll-area-scrollbar { z-index: 10; margin: 0.25rem; display: flex; touch-action: none; user-select: none; border-radius: 9999px; transition: all 150ms ease-out; background-color: var(--grayscale-a3); } .fern-scroll-area-scrollbar[data-state="hidden"] { opacity: 0; } .fern-scroll-area-scrollbar[data-orientation="vertical"] { margin-top: 5px; margin-bottom: 5px; width: 4px; } .fern-scroll-area-scrollbar[data-orientation="vertical"]:hover { width: 6px; } .fern-scroll-area-scrollbar[data-orientation="horizontal"] { margin-left: 5px; margin-right: 5px; height: 4px; flex-direction: column; } .fern-scroll-area-scrollbar[data-orientation="horizontal"]:hover { height: 6px; } ``` #### .fern-scroll-area-thumb Scrollbar thumb. **`Default CSS`** ```css Default CSS .fern-scroll-area-thumb { position: relative; z-index: auto; display: flex; background-color: var(--accent-track); flex: 1 1 0%; border-radius: 9999px; } .fern-scroll-area-thumb::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 28px; min-height: 28px; } ``` #### .fern-scroll-area-corner Scrollbar corner. **`Default CSS`** ```css Default CSS .fern-scroll-area-corner { background-color: transparent; } ``` ## Badge components Selectors for [badges](/learn/docs/writing-content/components/badges) and HTTP method tags. #### .fern-docs-badge Badge for labels, status, and HTTP methods. **`Default CSS`** ```css Default CSS .fern-docs-badge { align-items: center; display: inline-flex; gap: 0.25rem; justify-content: center; line-height: 1rem; box-sizing: border-box; font-weight: 600; white-space: nowrap; } .fern-docs-badge.small { border-radius: var(--radius-1); font-size: 0.75rem; height: 1.25rem; padding: 0 0.375rem; } .fern-docs-badge.large { border-radius: var(--radius-3/2); font-size: 0.875rem; height: 1.5rem; padding: 0.25rem 0.5rem; } .fern-docs-badge.rounded { border-radius: 9999px !important; } .fern-docs-badge:disabled { opacity: 0.5; cursor: not-allowed; } .fern-docs-badge[data-badge-type="http-method"], .fern-docs-badge[data-badge-type="status-code"] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; font-variant-numeric: slashed-zero; text-transform: uppercase; } ``` ## MDX content components Selectors for links, callouts, steps, and tables. #### .fern-mdx-link Link with external icon and hover underline. **`Default CSS`** ```css Default CSS .fern-mdx-link { color: var(--accent-a11); font-weight: 600; text-decoration-line: underline; text-decoration-color: currentcolor; text-decoration-thickness: 1px !important; text-underline-offset: 0.25rem; } .fern-mdx-link:hover { text-decoration-thickness: 2px !important; } .fern-mdx-link svg.external-link-icon { margin-left: 0.125rem; display: inline-block; width: 0.875rem; height: 0.875rem; color: currentColor; opacity: 0.7; overflow: visible; } .fern-mdx-link:hover svg.external-link-icon path:nth-child(1), .fern-mdx-link:hover svg.external-link-icon path:nth-child(2) { transform: translate(2px, -2px); transition: transform 0.2s ease; } ``` #### .fern-callout [Callout](/learn/docs/writing-content/components/callouts) with intent-matched colors. **`Default CSS`** ```css Default CSS .fern-callout { border-radius: var(--radius-3); margin-bottom: 1.5rem; margin-top: 1rem; border: 1px solid; padding: 1rem; } .fern-callout:first-child { margin-top: 0; } ``` **Intent variants:** * `[data-intent="info"]` - Gray/neutral (default) * `[data-intent="warning"]` - Amber/yellow * `[data-intent="success"]` - Green * `[data-intent="error"]` - Red * `[data-intent="note"]` - Blue * `[data-intent="launch"]` - Accent color * `[data-intent="tip"]` - Green * `[data-intent="check"]` - Green #### .fern-indent [Indent](/learn/docs/writing-content/components/indent) with vertical guide line. **`Default CSS`** ```css Default CSS .fern-indent { position: relative; margin-left: 1rem; padding-left: 1rem; } .fern-indent > * + * { margin-top: 0.25rem; } .fern-indent::before { content: ''; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; border-left: 1px solid transparent; } ``` #### .fern-steps [Steps](/learn/docs/writing-content/components/steps) container. **`Default CSS`** ```css Default CSS .fern-steps { border-left: 1px solid var(--border-default); margin-bottom: 3rem; margin-left: 0.75rem; margin-top: 1rem; padding-left: 1.75rem; } ``` #### .fern-step Single [step](/learn/docs/writing-content/components/steps). **`Default CSS`** ```css Default CSS .fern-step > .fern-anchor { position: absolute; margin-left: -40px; margin-top: 0.25rem; } ``` #### .fern-anchor [Anchor](/learn/docs/writing-content/components/anchor) for deep linking. **`Default CSS`** ```css Default CSS a.fern-anchor { border-radius: var(--radius-3/2); position: relative; display: flex; width: 1.5rem; height: 1.5rem; align-items: center; border: 0; } .fern-anchor-icon { border-radius: var(--radius-3/2); position: absolute; left: 0; display: flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; } .fern-anchor-icon:not(.copied) { color: var(--grayscale-a11); background-color: var(--card-background); border: 1px solid var(--card-border); backdrop-filter: blur(8px); } .fern-anchor-icon.copied { background-color: var(--accent-a3); border: 1px solid var(--accent-a5); backdrop-filter: blur(8px); } .fern-anchor-icon.copied > svg { color: var(--accent-a11); } .fern-anchor-icon > svg { width: 1rem; height: 1rem; } ``` #### .fern-table-root Table container. **`Default CSS`** ```css Default CSS .fern-table-root { border: 1px solid var(--card-border); border-radius: var(--radius-3/2); background-color: var(--card-background); overflow: hidden; font-size: 0.875rem; backdrop-filter: blur(32px); display: flex; flex-direction: column; } ``` #### .fern-table Table with `.sticky` support for [sticky headers](/learn/docs/writing-content/components/tables#sticky-tables). **`Default CSS`** ```css Default CSS .fern-table { width: 100%; } .fern-table thead tr th { background-color: var(--grayscale-a2); } .fern-table td, .fern-table th { height: 2.25rem; padding: 0.5rem; text-align: left; border-bottom: 1px solid var(--card-border); } .fern-table tbody > tr:last-child > td { border-bottom: 0; } .fern-table.sticky { font-size: 0.875rem; } .fern-table.sticky thead { position: sticky; top: var(--header-height, var(--spacing-header-height-real)); } .fern-table.sticky thead tr th { background-color: var(--grayscale-2); } .fern-table.sticky td, .fern-table.sticky th { max-width: 0; } ``` ## Changelog filter components Selectors for changelog filter UI. Only on [changelog pages](/learn/docs/configuration/changelogs) with tags. #### .fern-filter-dropdown-button Filter dropdown trigger button. **`Default CSS`** ```css Default CSS .fern-filter-dropdown-button { /* Inherits from .fern-button with variant="outlined" */ } ``` **`Example: Customize the filter button appearance`** ```css Example: Customize the filter button appearance /* Style the filter dropdown button */ .fern-filter-dropdown-button { border-color: var(--accent-a7); background-color: var(--accent-a2); } .fern-filter-dropdown-button:hover { border-color: var(--accent-a9); background-color: var(--accent-a3); } ``` #### .fern-filter-dropdown-button-text Filter button text. **`Default CSS`** ```css Default CSS .fern-filter-dropdown-button-text { /* Inherits text styles from parent button */ } ``` **`Example: Visually replace the default label text`** ```css Example: Visually replace the default label text /* Replace "Select filters" with custom text using CSS */ .fern-filter-dropdown-button-text { font-size: 0; } .fern-filter-dropdown-button-text::after { content: "Select product"; font-size: 0.875rem; } ``` #### .fern-filter-dropdown-button-icon Filter button chevron. **`Default CSS`** ```css Default CSS .fern-filter-dropdown-button-icon { width: 1rem; height: 1rem; } ``` **`Example: Customize the chevron icon`** ```css Example: Customize the chevron icon /* Change the chevron color */ .fern-filter-dropdown-button-icon { color: var(--accent-a11); } ``` #### .fern-filter-dropdown-item Filter dropdown item. **`Default CSS`** ```css Default CSS .fern-filter-dropdown-item { /* Inherits from .fern-dropdown-item */ } ``` **`Example: Style filter dropdown items`** ```css Example: Style filter dropdown items /* Customize filter dropdown items */ .fern-filter-dropdown-item { padding: 0.5rem 0.75rem; } .fern-filter-dropdown-item[data-highlighted] { background-color: var(--accent-a4); color: var(--accent-a12); } ``` #### .fern-filter-badge Filter badge base class. **`Default CSS`** ```css Default CSS .fern-filter-badge { display: inline; max-width: 100%; cursor: pointer; overflow: hidden; text-overflow: ellipsis; } ``` #### .fern-filter-badge-selected Selected filter badge. **`Default CSS`** ```css Default CSS .fern-filter-badge-selected { /* Inherits from .fern-docs-badge with variant="outlined" */ } ``` **`Example: Style selected filter badges with your brand color`** ```css Example: Style selected filter badges with your brand color /* Make selected badges use your accent color */ .fern-filter-badge.fern-filter-badge-selected { background-color: var(--accent-a9); color: var(--accent-contrast); border-color: var(--accent-a9); } ``` #### .fern-filter-badge-unselected Unselected filter badge. **`Default CSS`** ```css Default CSS .fern-filter-badge-unselected { /* Inherits from .fern-docs-badge with variant="outlined-subtle" */ } ``` **`Example: Mute unselected filter badges`** ```css Example: Mute unselected filter badges /* Style unselected badges with muted appearance */ .fern-filter-badge.fern-filter-badge-unselected { background-color: transparent; color: var(--grayscale-a10); border-color: var(--grayscale-a6); } ``` #### .fern-dropdown-checkmark Filter dropdown checkmark. **`Default CSS`** ```css Default CSS .fern-dropdown-checkmark { width: 1rem; height: 1rem; } ``` **`Example: Customize the checkmark color`** ```css Example: Customize the checkmark color /* Change the checkmark color to match your brand */ .fern-dropdown-checkmark { color: var(--accent-a11); } /* Or target only changelog filter checkmarks */ .fern-filter-dropdown-item .fern-dropdown-checkmark { color: var(--accent-a11); } ``` ## API Reference components Selectors for [API Reference](/learn/docs/api-references/overview) components. #### .fern-api-property API property container. **`Default CSS`** ```css Default CSS .fern-api-property { display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; } .fern-api-property p:last-child { margin-bottom: 0; } ``` #### .fern-api-property-header API property header. **`Default CSS`** ```css Default CSS .fern-api-property-header { display: flex; align-items: baseline; gap: 0.5rem; } ``` #### .fern-api-property-key API property name. **`Default CSS`** ```css Default CSS .fern-api-property-key { color: var(--text-body); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; } ``` #### .fern-api-property-meta API property metadata (type, required). **`Default CSS`** ```css Default CSS .fern-api-property-meta { color: var(--grayscale-a11); display: inline-flex; align-items: baseline; gap: 0.5rem; font-size: 0.75rem; } ``` #### .fern-api-property-constraint API property constraint. **`Default CSS`** ```css Default CSS .fern-api-property-constraint { display: inline-block; max-width: 100%; min-width: 0; } ``` #### .fern-api-property-optional "Optional" label on non-required properties. Inherits styles from `.fern-api-property-meta`. **`Example: Hide the "Optional" label`** ```css Example: Hide the "Optional" label .fern-api-property-optional { display: none; } ``` #### .fern-api-property-required "Required" label on required properties. **`Default CSS`** ```css Default CSS .fern-api-property-required { color: var(--red-a11); } ``` #### .fern-api-property-type API property type label (e.g. "string", "integer"). Inherits styles from `.fern-api-property-meta`. **`Example: Customize type label color`** ```css Example: Customize type label color .fern-api-property-type { color: var(--accent-a11); } ``` #### .fern-api-property-default Default value display for a property. **`Example: Style default value`** ```css Example: Style default value .fern-api-property-default code { color: var(--accent-a11); } ``` #### .fern-api-property-readonly "Read only" label on read-only properties. Inherits styles from `.fern-api-property-meta`. **`Example: Hide the "Read only" label`** ```css Example: Hide the "Read only" label .fern-api-property-readonly { display: none; } ``` ## Utility components Selectors for [icons](/learn/docs/writing-content/components/icons), [tooltips](/learn/docs/writing-content/components/tooltips), and other elements. #### .fern-highlight Highlighted text. **`Default CSS`** ```css Default CSS .fern-highlight { color: var(--accent-a12); background-color: transparent; font-weight: 700; } ``` #### .fern-mdx-icon Inline icon (adapts to theme). **`Default CSS`** ```css Default CSS .fern-mdx-icon { color: var(--grayscale-a11); display: inline-block; vertical-align: baseline; } @variant dark { .fern-mdx-icon { color: var(--fa-icon-dark, var(--grayscale-a11)); } } ``` #### .fern-mdx-tooltip-trigger Tooltip trigger with underline. **`Default CSS`** ```css Default CSS .fern-mdx-tooltip-trigger { --tooltip-underline-color: var(--grayscale-a10); --tooltip-underline-hover-color: var(--grayscale-12); --tooltip-underline-thickness: 1px; --tooltip-underline-offset: 1px; --tooltip-transition-duration: 0.15s; display: inline-block; cursor: help; text-decoration: underline dashed var(--tooltip-underline-color) var(--tooltip-underline-thickness); text-underline-position: under; text-underline-offset: var(--tooltip-underline-offset); transition: text-decoration-color var(--tooltip-transition-duration) ease; } .fern-mdx-tooltip-trigger:hover { text-decoration-color: var(--tooltip-underline-hover-color); } ``` #### .fern-mdx-tooltip-content Tooltip content. **`Default CSS`** ```css Default CSS .fern-mdx-tooltip-content { --tooltip-padding-x: 0.75rem; padding-left: var(--tooltip-padding-x) !important; padding-right: var(--tooltip-padding-x) !important; } ``` #### .fern-file-icon File type icon. **`Default CSS`** ```css Default CSS .fern-selection-item-icon .fern-file-icon { display: block; height: 50%; width: 50%; transition: all 300ms ease-in-out; } .fern-selection-item:hover .fern-selection-item-icon .fern-file-icon { transform: scale(1.2); } ``` #### .fern-collapsible-child Collapsible child element. **`Default CSS`** ```css Default CSS .fern-collapsible[data-state="open"] .fern-collapsible-child { animation: slide-down 0.18s var(--ease-collapse) none; width: var(--radix-collapsible-content-width); } .fern-collapsible[data-state="closed"] .fern-collapsible-child { animation: slide-up 0.18s var(--ease-collapse) none; width: var(--radix-collapsible-content-width); } @keyframes slide-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @keyframes slide-up { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } ``` #### .fern-runnable-endpoint [Runnable endpoint](/learn/docs/writing-content/components/runnable-endpoint). **`Default CSS`** ```css Default CSS .fern-runnable-endpoint ul { padding-left: 0 !important; margin-top: 0 !important; } .fern-runnable-endpoint button { margin-top: 0 !important; } .fern-runnable-endpoint .fern-input:disabled, .fern-runnable-endpoint .fern-textarea:disabled { cursor: not-allowed; opacity: 0.6; } .fern-runnable-endpoint .fern-input-group:has(.fern-input:disabled), .fern-runnable-endpoint .fern-textarea-group:has(.fern-textarea:disabled), .fern-runnable-endpoint .fern-numeric-input-group:has(.fern-input:disabled) { opacity: 0.6; cursor: not-allowed; background-color: var(--grayscale-a2); pointer-events: none; } ``` #### .fern-rss-feed-button RSS feed button. **`Default CSS`** ```css Default CSS .fern-rss-feed-button .fern-button-content { gap: 0.5rem; } ``` #### .fern-layout-footer Documentation footer. **`Default CSS`** ```css Default CSS .fern-layout-footer.not-prose { margin-top: 4rem !important; } ``` #### .fern-layout-footer-toolbar Footer toolbar. **`Default CSS`** ```css Default CSS .fern-layout-footer-toolbar { display: flex; gap: 1rem; justify-content: space-between; } @media (max-width: 640px) { .fern-layout-footer-toolbar { flex-direction: column; gap: 2rem; } } ``` #### .fern-footer-nav Previous/next page navigation. **`Default CSS`** ```css Default CSS .fern-footer-nav { display: flex; background-color: var(--grayscale-a3); border-radius: var(--radius-4); padding: 0.25rem; margin-left: -0.25rem; margin-right: -0.25rem; } ``` **Variants:** * `.fern-footer-nav--simple` - Simplified navigation style without background #### .fern-footer-prev Previous page link. **`Default CSS`** ```css Default CSS .fern-footer-prev { display: flex; height: 4rem; flex-shrink: 0; align-items: center; gap: 0.25rem; padding: 0.75rem; padding-right: 1.5rem; } ``` #### .fern-footer-next Next page link. **`Default CSS`** ```css Default CSS .fern-footer-next { display: flex; position: relative; height: 4rem; min-width: 0; flex: 1 1 0%; flex-shrink: 1; align-items: center; justify-content: flex-end; gap: 1rem; overflow: clip; border: 1px solid var(--card-border); padding: 0.75rem; background-color: var(--card-solid); transition: all 0.15s; } .fern-footer-next:hover { border-color: var(--accent-a9); } ``` ## Changelog components Selectors for [changelog pages](/learn/docs/configuration/changelogs). The changelog overview renders a feed: a control bar (search and tag filters) above a vertical timeline of entry cards grouped by day. The page layout container is `.fern-layout-changelog` (documented under [Layout and structure](#layout-and-structure)). #### .fern-changelog-feed Centered column that holds the changelog header, control bar, and timeline. **`Default CSS`** ```css Default CSS .fern-changelog-feed { width: var(--content-wide-width); max-width: 100%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 2rem; } ``` #### .fern-changelog-controls Control bar with the full-text search and tag filter. Inner elements: `.fern-changelog-controls-row` and `.fern-changelog-search`. **`Default CSS`** ```css Default CSS .fern-changelog-controls { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--grayscale-a4); } .fern-changelog-controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .fern-changelog-search { min-width: 0; flex: 1 1 0%; } ``` #### .fern-changelog-timeline Vertical timeline: a left date gutter beside a rail of entry cards. Entries are grouped per day into `.fern-changelog-day-group`, with the date in `.fern-changelog-day` and that day's cards in `.fern-changelog-day-entries`. **`Default CSS`** ```css Default CSS .fern-changelog-timeline { display: flex; flex-direction: column; } .fern-changelog-day-group { display: flex; gap: 1rem; } .fern-changelog-day { color: var(--grayscale-a11); width: 6rem; flex-shrink: 0; align-self: flex-start; padding-top: 1.25rem; font-size: 0.75rem; line-height: 1.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; position: sticky; top: calc(var(--fern-changelog-sticky-top, var(--spacing-header-height-padded)) + 0.5rem); } .fern-changelog-day-entries { display: flex; min-width: 0; flex: 1 1 0%; flex-direction: column; border-left: 1px solid var(--grayscale-a4); } ``` #### .fern-changelog-card A single clickable changelog entry card in the timeline. Inner elements: `.fern-changelog-card-marker` (timeline dot), `.fern-changelog-card-body`, `.fern-changelog-card-title`, `.fern-changelog-card-link`, `.fern-changelog-card-excerpt`, `.fern-changelog-card-preview` (rich MDX preview), and `.fern-changelog-card-tags`. **`Default CSS`** ```css Default CSS .fern-changelog-card { position: relative; border-radius: var(--radius-3); padding: 1.25rem 1rem 1.25rem 1.5rem; transition: color, background-color; } .fern-changelog-card:hover { background-color: var(--grayscale-a2); } .fern-changelog-card-marker { position: absolute; left: 0; top: 2rem; width: 0.625rem; height: 0.625rem; transform: translate(-50%, -50%); border-radius: 9999px; background-color: var(--grayscale-6); } .fern-changelog-card:hover .fern-changelog-card-marker { background-color: var(--accent); } .fern-changelog-card-body { display: flex; flex-direction: column; gap: 0.375rem; } .fern-changelog-card-title { margin: 0; color: var(--grayscale-a12); font-size: 1rem; font-weight: 600; } .fern-changelog-card-excerpt { margin: 0; color: var(--grayscale-a11); font-size: 0.875rem; line-height: 1.625; } ``` #### .fern-changelog-tags Tag chips as rendered inside a full changelog entry page. In the timeline cards the chips render in `.fern-changelog-card-tags`. Search matches are highlighted with `.fern-changelog-highlight`, and `.fern-changelog-empty` shows when no entries match the active filters. **`Default CSS`** ```css Default CSS .fern-changelog-tags { margin-bottom: 1rem; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.375rem; } .fern-changelog-highlight { background-color: var(--accent-a3); color: var(--accent-a11); border-radius: var(--radius-1); } .fern-changelog-empty { color: var(--grayscale-a11); padding-top: 4rem; padding-bottom: 4rem; text-align: center; font-size: 0.875rem; } ``` #### .fern-changelog-content Changelog content area. **`Default CSS`** ```css Default CSS .fern-changelog-content { position: relative; margin-left: auto; margin-right: auto; display: grid; width: 100%; max-width: var(--content-width); grid-template-columns: 1fr; gap: 1rem; } ``` #### .fern-changelog-label Changelog entry label. **`Default CSS`** ```css Default CSS .fern-changelog-label { display: flex; width: 100%; flex-direction: row; gap: 0.5rem; } @media (min-width: 1280px) { .fern-changelog-label { flex-direction: column; } } ``` ## Complete selector index The sections of this page document the most commonly customized selectors in detail. The table below is the complete set of stable `fern-*` selectors present in the rendered docs, generated from the Fern docs source. Any `fern-*` selector not in the table doesn't exist in the rendered site. Selector Type `.fern-accordion` Class `.fern-accordion-item` Class `.fern-accordion-trigger` Class `.fern-accordion-trigger-arrow` Class `.fern-accordion-trigger-title` Class `.fern-air` Class `.fern-analytics-ga` Class `.fern-analytics-gtm` Class `.fern-analytics-segment` Class `.fern-anchor` Class `.fern-anchor-icon` Class `#fern-announcement` ID `.fern-announcement-dismissed` Class `.fern-api-property` Class `.fern-api-property-constraint` Class `.fern-api-property-default` Class `.fern-api-property-header` Class `.fern-api-property-key` Class `.fern-api-property-meta` Class `.fern-api-property-optional` Class `.fern-api-property-readonly` Class `.fern-api-property-required` Class `.fern-api-property-type` Class `#fern-ask-ai-button` ID `#fern-ask-ai-button-icon` ID `#fern-ask-ai-panel` ID `#fern-ask-ai-panel-header` ID `#fern-ask-ai-panel-header-icon` ID `#fern-ask-ai-panel-input` ID `.fern-audio-player` Class `#fern-auth-button` ID `.fern-back-to-top` Class `.fern-background-image` Class `.fern-bleed` Class `.fern-breadcrumb` Class `.fern-breadcrumb-arrow` Class `.fern-breadcrumb-item` Class `.fern-button` Class `.fern-button-content` Class `.fern-button-group` Class `.fern-button-text` Class `.fern-callout` Class `.fern-card` Class `.fern-card-group` Class `.fern-changelog-card` Class `.fern-changelog-card-body` Class `.fern-changelog-card-excerpt` Class `.fern-changelog-card-link` Class `.fern-changelog-card-marker` Class `.fern-changelog-card-preview` Class `.fern-changelog-card-tags` Class `.fern-changelog-card-title` Class `.fern-changelog-content` Class `.fern-changelog-controls` Class `.fern-changelog-controls-row` Class `.fern-changelog-day` Class `.fern-changelog-day-entries` Class `.fern-changelog-day-group` Class `.fern-changelog-empty` Class `.fern-changelog-feed` Class `.fern-changelog-highlight` Class `.fern-changelog-highlight-style` Class `.fern-changelog-label` Class `.fern-changelog-overview` Class `.fern-changelog-search` Class `.fern-changelog-tags` Class `.fern-changelog-timeline` Class `.fern-checkbox-indicator` Class `.fern-checkbox-item` Class `.fern-checkbox-label` Class `.fern-code` Class `.fern-code-actions` Class `.fern-code-block` Class `.fern-code-block-actions` Class `.fern-code-block-content` Class `.fern-code-block-header` Class `.fern-code-block-header-inner` Class `.fern-code-block-title` Class `.fern-code-block-title-label` Class `.fern-code-content` Class `.fern-code-group` Class `.fern-code-group-actions` Class `.fern-code-group-content` Class `.fern-code-group-header` Class `.fern-code-group-header-inner` Class `.fern-code-group-tab` Class `.fern-code-group-tab-label` Class `.fern-code-group-tabs` Class `.fern-code-header` Class `.fern-code-header-inner` Class `.fern-code-label` Class `.fern-code-link` Class `.fern-collapse-trigger` Class `.fern-collapsible` Class `.fern-collapsible-card` Class `.fern-collapsible-card-nested` Class `.fern-collapsible-card-print-truncated` Class `.fern-collapsible-child` Class `.fern-copy-button` Class `.fern-copy-inline` Class `.fern-dashboard` Class `.fern-docs-badge` Class `.fern-docs-feedback` Class `.fern-docs-static` Class `.fern-docs-track-analytics` Class `.fern-dropdown` Class `.fern-dropdown-checkmark` Class `.fern-dropdown-item` Class `.fern-dropdown-item-indicator` Class `.fern-endpoint-code-snippets` Class `.fern-endpoint-request-snippet` Class `.fern-endpoint-response-snippet` Class `.fern-endpoint-section-auth` Class `.fern-endpoint-section-errors` Class `.fern-endpoint-section-headers` Class `.fern-endpoint-section-path-parameters` Class `.fern-endpoint-section-query-parameters` Class `.fern-endpoint-section-request-body` Class `.fern-endpoint-section-response-body` Class `.fern-endpoint-section-response-headers` Class `.fern-endpoint-selector` Class `.fern-env-switcher` Class `.fern-expand-button` Class `.fern-explorer-auth-form` Class `.fern-explorer-clear-form-button` Class `.fern-explorer-endpoint-form` Class `.fern-explorer-example-selector` Class `.fern-explorer-form` Class `.fern-explorer-form-buttons` Class `.fern-explorer-request-card` Class `.fern-explorer-request-header` Class `.fern-explorer-request-title` Class `.fern-explorer-response-card` Class `.fern-explorer-response-header` Class `.fern-explorer-response-title` Class `.fern-explorer-section-body` Class `.fern-explorer-section-body-parameters` Class `.fern-explorer-section-content` Class `.fern-explorer-section-header` Class `.fern-explorer-section-headers` Class `.fern-explorer-section-multipart-form` Class `.fern-explorer-section-parameters` Class `.fern-explorer-section-path-parameters` Class `.fern-explorer-section-query-parameters` Class `.fern-explorer-send-request-button` Class `.fern-feedback-button` Class `.fern-file-icon` Class `.fern-filter-badge` Class `.fern-filter-badge-selected` Class `.fern-filter-badge-unselected` Class `.fern-filter-dropdown-button` Class `.fern-filter-dropdown-button-content` Class `.fern-filter-dropdown-button-icon` Class `.fern-filter-dropdown-button-text` Class `.fern-filter-dropdown-item` Class `#fern-footer` ID `.fern-footer-nav` Class `.fern-footer-nav--simple` Class `.fern-footer-next` Class `.fern-footer-prev` Class `.fern-ground` Class `#fern-header` ID `.fern-header-content` Class `.fern-header-height` Class `.fern-header-logo-container` Class `.fern-header-mobile-menu-button` Class `.fern-header-navbar-links` Class `.fern-header-search-bar` Class `.fern-header-selectors` Class `.fern-header-switchers` Class `.fern-header-switchers-separator` Class `.fern-header-tabs` Class `.fern-highlight` Class `.fern-image-loader` Class `.fern-indent` Class `.fern-input` Class `.fern-input-clear-button` Class `.fern-input-group` Class `.fern-input-icon` Class `.fern-input-right-element` Class `.fern-kbd` Class `.fern-language-dropdown-content` Class `.fern-language-dropdown-item` Class `.fern-language-dropdown-item-label` Class `.fern-language-selector` Class `.fern-language-selector-radio-group` Class `.fern-layout-changelog` Class `.fern-layout-changelog-entry` Class `.fern-layout-content-wrapper` Class `.fern-layout-footer` Class `.fern-layout-footer-toolbar` Class `.fern-layout-guide` Class `.fern-layout-overview` Class `.fern-layout-page` Class `.fern-layout-reference` Class `.fern-layout-reference-aside` Class `.fern-layout-reference-content` Class `.fern-logo-text` Class `.fern-main` Class `.fern-mdx-icon` Class `.fern-mdx-link` Class `.fern-mdx-tooltip-content` Class `.fern-mdx-tooltip-trigger` Class `.fern-mermaid` Class `.fern-navigation-storage` Class `.fern-not-found-shell` Class `.fern-numeric-input-group` Class `.fern-numeric-input-step` Class `.fern-page-actions` Class `.fern-page-heading` Class `.fern-page-roles` Class `.fern-page-subtitle` Class `.fern-pdf-cover-date` Class `.fern-pdf-cover-footer` Class `.fern-pdf-cover-footer-brand` Class `.fern-pdf-cover-root` Class `.fern-pdf-cover-subtitle` Class `.fern-pdf-cover-title` Class `.fern-playground-field` Class `.fern-playground-field-actions` Class `.fern-playground-field-block` Class `.fern-playground-field-control` Class `.fern-playground-field-count` Class `.fern-playground-field-header` Class `.fern-playground-field-help-icon` Class `.fern-playground-field-inline` Class `.fern-playground-field-item` Class `.fern-playground-field-key` Class `.fern-playground-field-label` Class `.fern-playground-field-list` Class `.fern-playground-field-remove` Class `.fern-playground-field-type` Class `.fern-playground-floating-button` Class `.fern-playground-object-properties` Class `.fern-product-item` Class `.fern-product-item-link` Class `.fern-product-selector` Class `.fern-product-selector-radio-group` Class `.fern-product-tabs` Class `.fern-product-tabs-row` Class `.fern-programming-language` Class `.fern-prompt` Class `.fern-prompt-code` Class `.fern-prompt-code-wrapper` Class `.fern-prompt-icon` Class `.fern-prompt-icon-wrapper` Class `.fern-prose` Class `.fern-radio-group` Class `.fern-radio-indicator` Class `.fern-radio-item` Class `.fern-radio-label` Class `.fern-rss-feed-button` Class `.fern-runnable-actions` Class `.fern-runnable-auth` Class `.fern-runnable-auth-content` Class `.fern-runnable-auth-fields` Class `.fern-runnable-auth-title` Class `.fern-runnable-auth-toggle` Class `.fern-runnable-card` Class `.fern-runnable-clear-button` Class `.fern-runnable-endpoint` Class `.fern-runnable-endpoint-values` Class `.fern-runnable-form` Class `.fern-runnable-form-inner` Class `.fern-runnable-header` Class `.fern-runnable-header-actions` Class `.fern-runnable-header-inner` Class `.fern-runnable-response` Class `.fern-runnable-response-header` Class `.fern-runnable-response-label` Class `.fern-runnable-response-meta` Class `.fern-runnable-response-size` Class `.fern-runnable-response-status` Class `.fern-runnable-response-time` Class `.fern-runnable-section-content` Class `.fern-runnable-section-title` Class `.fern-runnable-send-button` Class `.fern-scroll-area` Class `.fern-scroll-area-corner` Class `.fern-scroll-area-scrollbar` Class `.fern-scroll-area-scrollbar-fade-in` Class `.fern-scroll-area-scrollbar-fade-out` Class `.fern-scroll-area-thumb` Class `.fern-scroll-area-viewport` Class `.fern-scroll-walkthrough` Class `.fern-scroll-walkthrough-aside` Class `.fern-scroll-walkthrough-aside-sticky` Class `.fern-scroll-walkthrough-code` Class `.fern-scroll-walkthrough-main` Class `.fern-scroll-walkthrough-panel` Class `.fern-scroll-walkthrough-panel-header` Class `.fern-scroll-walkthrough-panel-header-inner` Class `.fern-scroll-walkthrough-spacer` Class `.fern-scroll-walkthrough-step-body` Class `.fern-scroll-walkthrough-step-description` Class `.fern-scroll-walkthrough-step-detail` Class `.fern-scroll-walkthrough-step-head` Class `.fern-scroll-walkthrough-step-item` Class `.fern-scroll-walkthrough-step-marker` Class `.fern-scroll-walkthrough-step-title` Class `.fern-scroll-walkthrough-steps` Class `.fern-scroll-walkthrough-substep` Class `.fern-scroll-walkthrough-substep-body` Class `.fern-scroll-walkthrough-substep-code` Class `.fern-scroll-walkthrough-substep-content` Class `.fern-scroll-walkthrough-substep-marker` Class `.fern-scroll-walkthrough-substep-title` Class `.fern-scroll-walkthrough-substeps` Class `.fern-scroll-walkthrough-tab` Class `.fern-scroll-walkthrough-tabs` Class `#fern-search-button` ID `.fern-search-desktop-command` Class `#fern-search-dialog` ID `#fern-search-dialog-overlay` ID `.fern-search-hit-breadcrumb` Class `.fern-search-hit-endpoint-path` Class `.fern-search-hit-highlighted` Class `.fern-search-hit-non-highlighted` Class `.fern-search-hit-snippet` Class `.fern-search-hit-title` Class `#fern-search-mobile-command` ID `.fern-segmented-control` Class `.fern-selection-item` Class `.fern-selection-item-end-icon` Class `.fern-selection-item-icon` Class `.fern-selection-item-subtitle` Class `.fern-selection-item-title` Class `#fern-sidebar` ID `.fern-sidebar-desktop` Class `.fern-sidebar-group` Class `.fern-sidebar-group-level-1` Class `.fern-sidebar-group-root` Class `.fern-sidebar-header` Class `.fern-sidebar-heading` Class `.fern-sidebar-heading-content` Class `.fern-sidebar-level-0` Class `.fern-sidebar-link` Class `.fern-sidebar-link-inline-badge` Class `.fern-sidebar-link-title` Class `.fern-sidebar-link-title-inner` Class `.fern-sidebar-marquee` Class `#fern-sidebar-overlay` ID `#fern-sidebar-scroll-area` ID `.fern-sidebar-scroll-position` Class `#fern-sidebar-spacer` ID `.fern-sidebar-tabs` Class `.fern-step` Class `.fern-steps` Class `.fern-stream` Class `.fern-table` Class `.fern-table-collapse` Class `.fern-table-pagination` Class `.fern-table-pagination-controls` Class `.fern-table-pagination-label` Class `.fern-table-root` Class `.fern-table-search` Class `.fern-table-search-clear` Class `.fern-table-search-icon` Class `.fern-table-search-input` Class `.fern-table-show-all` Class `.fern-textarea` Class `.fern-textarea-group` Class `#fern-theme-color` ID `#fern-theme-color-preferred-dark` ID `#fern-theme-color-preferred-light` ID `#fern-toc` ID `.fern-token` Class `.fern-toolbar` Class `.fern-user` Class `.fern-variant-selector` Class `.fern-variant-selector-dropdown` Class `.fern-variant-selector-radio-group` Class `.fern-version-selector` Class `.fern-version-selector-radio-group` Class `.fern-walkthrough` Class `.fern-walkthrough-aside` Class `.fern-walkthrough-aside-sticky` Class `.fern-walkthrough-close` Class `.fern-walkthrough-control` Class `.fern-walkthrough-controls` Class `.fern-walkthrough-frame` Class `.fern-walkthrough-progress` Class `.fern-walkthrough-step` Class `.fern-walkthrough-step-body` Class `.fern-walkthrough-step-description` Class `.fern-walkthrough-step-item` Class `.fern-walkthrough-step-number` Class `.fern-walkthrough-step-title` Class `.fern-walkthrough-steps` Class `.fern-walkthrough-toolbar` Class `.fern-web-socket-badge` Class `.fern-web-socket-chevron` Class `.fern-web-socket-client` Class `.fern-web-socket-content` Class `.fern-web-socket-copy` Class `.fern-web-socket-end-sample` Class `.fern-web-socket-server` Class `.fern-web-socket-trigger` Class `.fern-web-socket-trigger-data` Class `.fern-web-socket-type` Class `.fern-x-overflow` Class > Reference guide for all CSS selectors available in Fern docs. Customize layouts, navigation, buttons, forms, accordions, badges, API components, and more.