Skip to content

PatternLab (1.3.1)

Theme wählen:

Main Navigation Basics

UX/UI Design

Figma: LabXpert Design System

Figma: Neue Module und Redesigns

IT Development

Bitbucket Repository

Sidebar Navigation

Getting Started

Development

Patternlab Integration

Patternlab Deployment

Patternlab Themes

Symlink to TYPO3

Markdown Extension Examples

Basics

Accessibility

Introduction to Web Accessibility

Accessibility Helper Classes

Typography

Headings

Text Styles

Typography Helper Classes

Layout & Spacings

Border Helper Classes

Flexbox Helper Classes

Grid Helper Classes

Layout Container

Layout Section

Positioning / Display Helper Classes

Size Helper Classes

Spacing Helper Classes

Other Helper Classes

Animation Helper Classes

Color Helper Classes

Print Helper Classes

Random Helper Classes

Shadow Helper Classes

Utilities

toggleStickyClass()

Useful SCSS Mixins

Useful SCSS Functions

Components

Atoms

Alert

Badge

Backdrop

Blockquote

Button

BasicButton (Vue)

Checkbox

Context Icon

Divider

FontAwesome Icons

Gefahrstoffsymbol

(Custom) DuoTone Icons

Highlight Block

(Responsive) Image

Icon Button

Input

Input (Old Style)

Label

Lights / Bullets

Link

Logos

Pill

Product Icon (pharma4u)

Radio Button

Radio Button (Fancy)

Select (Old Style)

Select2

Spinner

Tag

Textarea

Video

Molecules

Accordion

Autocomplete

Collapse

Combobox (Vue)

Cookie Layer

Circular Icon

Datepicker

Dropdown

Fancybox (Deprecated)

File Upload

Float Container

Gefahrstoffetikett

Icon Headline

Input Group

List

Menu Button

Menu Button Row

Notification / Snackbar

Pagination

Panel

Pie Chart

WebUI Popover (Deprecated)

Protocol Head

Progress Bar

Search

Slider

Specific Buttons

Tab

Table

Teaser

Tooltip

Progress Wizard

Organisms

Action Menu

Data Table

Filter Dropdown

Form

Image Wrapper

jqModal (Deprecated)

Modal

AppModal (Vue)

Show More List

LabXpert Navigation

pharma4u Footer

pharma4u Header

pharma4u LoginModal

pharma4u Navigation

Templates

Button Bar (Archive Search)

Dialogs

Filter Box

Protocol Footer Buttons

Protocol Legacy Templates

Zertifikats-Assistent

pharma4u: Contact

pharma4u Guestbook

pharma4u: News Teaser

pharma4u: Price Table

pharma4u: Teaser Grid

pharma4u: Home Services

Webinare: Info-Box

Webinare: Informationen

Webinare: LEO

Webinare: Termine

Layout

Border Helper Classes/

App Header

Flexbox Helper Classes

Layout Container

Layout Sections

Simple Grid

Fixed Overlay (Vue)

Size Helper Classes

Spacing Helper Classes

Vue Components

AppFixedOverlay (Layout)

BasicButton

Combobox

AppTooltip

AppModal

Utilities

Logger

Logger._formatMessage

Logger.log

Logger.warn

Logger.writeWarn

References

Atomic Design

Markdown Syntax

VitePress

On this page

Teaser

.c-teaser

TIP

Used on the pharma4u website. See pharma4u Home Teaser.

Example

1. Stex 2. Stex

Pager

Previous pageTable

Next pageTooltip

2026 - Pharma4u