en	Styleguide

en	Styleguide of the TYPO3 CMS

en	The module offers the creation of a page tree either with TCA demo records or content elements.<br />In addition, the most well-known backend components that come with the TYPO3 CMS are presented.

en	Component Library: Components

en	Backend UI Components

en	Browse and explore the TYPO3 backend component library including buttons, forms, cards, tables, and other UI elements.

en	Manage example page trees

en	Demo Page Trees

en	Create and manage example page trees with TCA demo records or content elements for testing and demonstration purposes.

en	Component Library: Styles

en	Design Tokens and Styles

en	Explore design tokens, color schemes, typography, shadows, and other styling elements used in the TYPO3 backend.

en	Components

en	Open %1s component

en	Manage example page trees

en	Styles

en	Open %1s style

en	Styleguide

en	Accordion

en	Collapsible content sections that expand and collapse to show or hide information.

en	Avatar

en	Display images representing backend users with optional status indicators.

en	Badges

en	Small labels for displaying status, counts, or categorization information.

en	Breadcrumbs

en	Navigation trail showing the current location in the backend hierarchy, including modules and records.

en	Buttons

en	Interactive elements for triggering actions with various styles, sizes, and states.

en	Cards

en	Flexible containers for grouping related content, displayed individually or in groups.

en	Checkboxes

en	Form controls for selecting one or more options, including toggles and switches.

en	Comboboxes

en	Input fields with dropdown suggestions for selecting or entering values.

en	Color Tokens

en	Predefined color values and design tokens used throughout the TYPO3 backend interface.

en	Components overview

en	Browse all available UI components in the TYPO3 backend component library.

en	Developer Tools

en	Specialized components and utilities for development and debugging purposes.

en	Dropdown

en	Toggleable overlays for displaying lists, menus, and contextual actions.

en	Flash messages

en	Temporary notifications for displaying feedback about user actions and system events.

en	Form

en	Complete form layouts combining various input fields and controls.

en	Icons

en	Complete library of icons available for use in the TYPO3 backend interface.

en	Infobox

en	Highlighted containers for displaying important information and contextual help.

en	Input

en	Text input fields with support for various types, states, and sizes.

en	Manage example page trees

en	Create and manage example page trees with TCA demo records or content elements for testing purposes.

en	Modal

en	Dialog windows that appear on top of page content for focused interactions.

en	Navs

en	Navigation components including tabs, pills, and flat navigation styles.

en	Notifications

en	Temporary messages for informing users about events with optional action buttons.

en	Pagination

en	Controls for navigating through multi-page content and data sets.

en	Panels

en	Collapsible content containers for organizing information into sections.

en	Progress indicators

en	Visual indicators showing completion status of tasks and processes.

en	Progress trackers

en	Segmented progress displays for multi-step processes like wizards.

en	Radio

en	Form controls for selecting a single option from multiple choices.

en	Select

en	Dropdown menus for choosing one or more options from a list.

en	Shadows

en	Shadow effects and elevation styles used to create depth in the interface.

en	Styles overview

en	Browse all available design styles including colors, typography, and visual tokens.

en	Surfaces

en	Background surfaces and container styles that define the visual hierarchy.

en	Tabs

en	Organized content sections with clickable headers for switching between views.

en	Tables

en	Structured layouts for displaying tabular data with optional action icons.

en	Textarea

en	Multi-line text input fields for entering longer content.

en	Trees

en	Hierarchical tree structures for displaying nested data and navigation.

en	Typography

en	Font styles, sizes, weights, and text formatting used throughout the backend.

en	An error occured while processing the page tree

en	Create page tree

en	Delete page tree and all related records

en	Data created

en	A page tree with TCA demo records was created.

en	No data created

en	A page tree with TCA demo records exists already. Please delete that first.

en	Data deleted

en	The page tree and all related records were deleted.

en	A localized label

en	A localized help text

en	Form engine - Minimal table configuration

en	Title field

en	Create page tree with site sets

en	Create page tree with sys_template

en	Delete page tree and all related records

en	Data created

en	A page tree with content elements was created.

en	No data created

en	A page tree with content elements exists already. Please delete that first.

en	Data deleted

en	The page tree and all related records were deleted.

en	Item group from locallang

en	Styleguide Frontend

en	Main content

en	Color scheme:

en	Color scheme

en	Frontend Styleguide

en	Avatar

en	An avatar displays an image that represents a backend user and can provide additional information such as their status.<br>Avatars can be displayed with an own ViewHelper. If an avatar image is stored in the user settings, this will be used instead of the standard image.

en	Default

en	Display the backend user's avatar image or a static fallback image for users without avatar images.

en	Status

en	If set, the backend user type (normal user or admin user) and its status (disabled or not) will be displayed next to the avatar.

en	Badges

en	Small labels for displaying status, counts, or categorization information in a compact format.

en	Color

en	Default

en	Shape

en	Usage within headings

en	Breadcrumb

en	Navigation trail showing the current location in the backend hierarchy, including modules and pages.

en	Buttons

en	Interactive elements for triggering actions, available in various colors, sizes, and states.

en	Color

en	Default

en	Active state

en	Disabled state

en	Types

en	Additional icon

en	Size

en	Default size

en	Small size

en	Cards

en	Cards can be displayed individually or in groups.

en	Alignment

en	If you have multiple cards and each have a link or button, they may not align properly depending on the length of the previously placed headings or description text. To ensure they align regardless of previous content, place the link or button inside <code>div.card-footer</code> and not inside <code>div.card-body</code>. This way the links will always be aligned at the bottom of the card.

en	Color

en	It is possible to color cards. However, this option is rarely used - so please use this option sparingly. All available options are listed below. If needed assign one of the following classes to the <code>div.card</code>.<br> If you want to display the card in its default state, it is not necessary to add <code>.card-default</code> to the <code>div.card</code> - just omit the extra class.

en	Default

en	This is an example of a single card with its possible content. Unless further defined via CSS, a single card takes on the full width of the place it has been put into.

en	"Extension Manager" module

en	In the extension manager it is possible to get pre-configured distributions. For this view, the cards have been enhanced with an image and some badges.

en	Form fields in cards

en	It is also possible to display forms and form fields in cards. This is done, for example, in the "Upload Extension" section of the <a href="%1s">"Extensions" module</a>, in the "Feature Toggles" overlay in the <a href="%2s">"Settings" module</a> and in the "Full search" submodule of the <a href="%3s">"DB Check" module</a>.

en	Multiple cards

en	To display multiple cards, group them by wrapping them with <code>div.card-container</code>.

en	Rows in cards

en	On top of the element information overlay, rows are included within the card component.

en	Size

en	To give the card the desired size, assign one of the following classes to the <code>div.card</code>. If only a single card is used, it must be wrapped with <code>div.card-container</code> as with multiple cards.

en	Checkboxes

en	Form controls for selecting one or more options, including standard checkboxes, toggles, and switches.

en	Card-Layout

en	Checkbox toggle button

en	Default

en	Icon Toggle

en	Labeled Toggle

en	Switch

en	Toggle

en	Comboboxes

en	Input fields with dropdown suggestions for selecting or entering values, combining text input with selection capabilities.

en	Default

en	Placeholder

en	Disabled

en	Readonly

en	Additional text

en	State

en	Dropdown

en	Toggleable overlays for displaying lists, menus, and contextual actions in a compact dropdown format.

en	Toggles

en	Basic

en	States

en	Header

en	Advanced Buttons

en	Text

en	Rows

en	Divider

en	Table

en	List items with actions

en	Developer Tools

en	Specialized components and utilities designed for development, debugging, and testing purposes.

en	Default

en	Flash messages

en	Temporary notifications for displaying feedback about user actions and system events in various severity levels.

en	Color

en	The color is decided by setting the corresponding <code>TYPO3\CMS\Core\Type\ContextualFeedbackSeverity</code>. The following options are available:

en	Default

en	Form

en	Complete form layouts combining various input fields, controls, and validation patterns.

en	Form with all fields and labels

en	Form with all fields and labels (right-to-left direction)

en	Form fields in rows

en	Login form example

en	Infobox

en	This is a fluid based widget for the backend that can be inserted as view helper.

en	Color

en	Custom icon

en	It is also possible to use a custom icon. Just pass the icon identifier as <code>iconName</code> to the view helper. The identifier must be registered in your TYPO3 installation.

en	Default

en	Without icon

en	Input

en	Text input fields supporting various types, states, and sizes for single-line data entry.

en	Default

en	Disabled

en	File upload

en	Email

en	Placeholder

en	Additional text

en	Password

en	State

en	Size

en	Default size

en	Small size

en	Modal

en	Modals on buttons can be triggered using the t3js-modal-trigger class. There are various data attributes to customize text and behavior. Not all of them are shown here.

en	Custom title and content within the modal

en	Default

en	Severity

en	Size

en	Navs

en	Navigation components including tabs, pills, and flat navigation styles for organizing content.

en	Basic

en	Flat

en	Pills

en	Tabs

en	Notifications

en	Temporary messages for informing users about events with optional action buttons and different severity levels. Error notifications persist until dismissed.

en	Action Buttons

en	Notification can be enriched with action buttons to trigger two kinds of actions: immediate action and deferred actions.

en	Immediate Action

en	Immediate actions are executed directly when the action button is triggered. The notification will dismiss immediately. This action type is suitable for action that don't need any processing time, e.g. calling a backend module.

en	Deferred Action

en	Deferred actions are suitable for actions that need a period of time until they finish, e.g. AJAX calls. The notifications will close as soon the action has ended successfully. When invoked, the button will show a spinner icon to indicate some activity.

en	Default

en	Implementation via HTML:

en	Implementation via script:

en	Severity

en	All notifications disappear after 5 seconds by default, except for the error message, which will remain stuck unless reconfigured.

en	Pagination

en	Controls for navigating through multi-page content and data sets with page numbers and navigation arrows.

en	Default

en	Panels

en	Collapsible content containers for organizing information into expandable and collapsible sections.

en	Collapsible

en	Nesting

en	Variants

en	Loader

en	Size

en	Progress

en	Progress Component

en	Header

en	Body

en	Footer

en	List

en	Table

en	Progress indicators

en	Progress bars represent a specific state that can be displayed in a percental fashion, e.g. amount of uploaded files, executed Upgrade Wizards or disk space usage.<br>If the exact amount of data being loaded is not known, progress bars may be rendered in an indeterminate state.<br>If applicable, use clear wording that describes the progress bar.

en	Custom label

en	Optionally, a label can be displayed below the progress bar.

en	Default

en	By default, an indefinite progress is displayed.

en	Max value

en	Ridiculous max value

en	Severity

en	Value

en	Progress trackers

en	Progress trackers are a segmented variant of progress bars, dividing the progress bar into equal chunks.<br>The primary usage is in wizard components.

en	Default

en	Active stage

en	Demo

en	Radio buttons

en	Form controls for selecting a single exclusive option from multiple mutually exclusive choices.

en	Card-Layout

en	Default

en	Select

en	Dropdown menus for choosing one or more options from a predefined list of values.

en	Default

en	Multiple selection

en	Option groups

en	Single selection with option groups

en	Multiple selection with option groups

en	State

en	Size

en	Default size

en	Small size

en	Single selection with option groups

en	Multiple selection with option groups

en	Tab

en	Organized content sections with clickable headers for switching between different views and panels.

en	Default

en	The last selected tab is stored in local browser storage.

en	Tables

en	Use tables to show tabular data. The action icons should always be in the last table row cell.

en	Color

en	To color table rows, a class can be added to the <code>tr</code> element.

en	Default

en	Color (full example)

en	Default

en	Wide tables

en	Textarea

en	Multi-line text input fields for entering and editing longer content and formatted text.

en	Default

en	Disabled

en	Placeholder

en	State

en	Size

en	Default size

en	Small size

en	Trees

en	Hierarchical tree structures for displaying and navigating nested data with expandable and collapsible nodes.

en	Collapsible tree

en	Collapsible trees are used to show the configuration in a more structured way. Lower levels can be opened and closed, while the entries are collapsed by default. If a user opens entries, this state is saved in the session. There are additional data attributes that can be added to <code>div.treelist-collapse</code> to configure the collapse state.

en	File tree

en	File trees are initialized via TypeScript like the page trees.

en	Page tree

en	Initialization of a page tree is done via TypeScript as in the code example below.

en	Color Tokens

en	Surfaces used in the TYPO3 Backend, for <strong>internal usage only</strong>.

en	Icons

en	Icons can be used in backend modules. TYPO3 automatically sends the corresponding HTML output code.

en	Default

en	Overlay

en	Overview

en	Size

en	Usage

en	Bitmap

en	Implementation in Fluid via ViewHelper:

en	Registration:

en	SVG

en	Shadows

en	Shadows used in the TYPO3 Backend, for <strong>internal usage only</strong>.

en	Surfaces

en	Surfaces used in the TYPO3 Backend, for <strong>internal usage only</strong>.

en	Color

en	Natural

en	Typography

en	Font styles, sizes, weights, and text formatting guidelines used throughout the TYPO3 backend.

en	Headings

en	Headline "H1" is the main headline within each backend module. Only added once to every backend page.<br>Headline "H2" is the headline for every section in backend modules. Place above each section and use several times.<br>Headline "H3" can be used to split section content into logical units. Place in between paragraphs within section.<br>Headline "H4" might be used to split off meta / footer information.

en	Links

en	Lists

en	By default, ordered and unordered lists are formatted with bullets and decimals. By adding <code>class="list-unstyled"</code> to the ol or ul tag, it is possible to structure content in list form without the typical list styling.

en	Ordered list

en	Unordered list

en	Paragraph

en	Small text

en	Footer information, small notices can be wrapped in small text tag.

en	Text color