BlogKontakt

Style Guide & Component Examples

This is a comprehensive display of the styling applied to various HTML elements and components in this project. Use this as a reference for the CSS styling across the site.

Typography

Heading 1

Native h1 element without classes

Heading 2

Native h2 element without classes

Heading 3

Native h3 element without classes

Heading 4

Native h4 element without classes

Heading 5

Native h5 element without classes

This is a standard paragraph with normal text. It demonstrates the default text styling in this project. The text color is set through CSS variables to ensure consistency across the application.

This is another paragraph that would normally have muted text styling.

Text can be bold, italic, or underlined for emphasis.

Links look like this and have hover effects.

Lists

Unordered List

  • First item in the list
  • Second item with emphasis
  • Third item with a link
  • Fourth and final item

Ordered List

  1. First step in the process
  2. Second step with important information
  3. Third step with additional details
  4. Final step to complete the process

Check List

  • Completed task
  • Another completed task
  • Uncompleted task

Card Components

Basic Card

A simple card with minimal styling

This is the main content area of the card. It can contain any type of content, including text, images, and other components.

Card footer text

ShadCN Card Structure

Following the shadcn/ui card component structure

This card is structured according to the shadcn/ui card component pattern with separate header, content, and footer sections.

It uses border separators to create distinct sections within the card.

Buttons

Button Styles

Button Sizes

Button Variants

Button with Icon

Theme Toggle Example

← Click to toggle between light and dark mode

Form Elements

Grid Layout Example

A simplified version of the original grid layout in dummy-content.tsx

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5

Alert Messages

Information

This is an informational alert message.

Success

Your changes have been saved successfully.

Warning

This action cannot be undone. Please proceed with caution.

Error

There was an error processing your request. Please try again.

Badges and Tags

Badge Styles

PrimarySecondarySuccessWarningError

Outline Badges

PrimarySecondarySuccessWarningError

Tags with Icons

In ProgressCompletedPendingCancelled

Dividers and Separators

Simple Divider

Content above the divider
Content below the divider

Divider with Label

Section Divider

Vertical Divider

Left Content
|
Right Content

Interactive Elements (Examples)

Tooltip Example

This is a tooltip that would appear on hover using actual components(Note: This is just a visual example)

Loading States

(Loading indicator example)