Skip to content

PatternLab (1.0.18)

Theme wählen:

Main Navigation Basics

UX/UI Design

Figma: LabXpert Design System

Figma: Neue Module und Redesigns

IT Development

Bitbucket Repository

Appearance

Sidebar Navigation

Getting Started

Development

Patternlab Integration

Patternlab Deployment

Patternlab Themes

Symlink to TYPO3

Markdown Extension Examples

Useful SCSS Mixins

Useful SCSS Functions

JavaScript Utilities

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

Components

Atoms

Alert

Backdrop

Blockquote

Button

Chart

Checkbox

Context Icon

Divider

FontAwesome Icons

(Custom) DuoTone Icons

Highlight Block

(Responsive) Image

Icon Button

Input

Input (Old Style)

Label

Lights / Bullets

Link

Logos

Pill

Product Icon

Radio Button

Radio Button (Fancy)

Select (Old Style)

Select2

Spinner

Tag

Textarea

Video

Molecules

Accordion

Autocomplete

Collapse

Cookie Layer

Circular Icon

Datepicker

Dropdown

Fancybox

Filter Box

File Upload

Float Container

Icon Headline

Image Lightbox

Input Group

List

Menu Button

Menu Button Row

Notification / Snackbar

Pagination

Panel

Pop-Over

Progress Bar

Search

Slider

Tab

Table

Teaser

Tooltip

Progress Wizard

Organisms

Action Menu

Data Table

Filter Dropdown

Form

Modal

Show More List

Text with Images

pharma4u Footer

pharma4u Header

pharma4u Navigation

Templates

Plausi Buttons

Plausi Legacy Templates

AP: Zertifikats-Assistent

pharma4u: Contact

pharma4u Guestbook

pharma4u: News Teaser

pharma4u: Price Table

pharma4u: Teaser Grid

Webinare: Info-Box

Webinare: Informationen

Webinare: LEO

Webinare: Termine

Layout

Border Helper Classes

Flexbox Helper Classes

Layout Container

Layout Sections

Simple Grid

Size Helper Classes

Spacing Helper Classes

Pages

pharma4u Start Page

Plausi

Using New Patterns in Plausi

Plausi Print

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 Teaser-Grid.

Example

1. Stex 2. Stex

Pager

Previous pageTable

Next pageTooltip

2026 - Pharma4u