Atomic Library

A collection of all atoms and global styles

← Back Home

Width Container
Headings

H1 claim - The quick brown fox jumps over the lazy dog and searches for the hennes

H1 - The quick brown fox jumps over the lazy dog and searches for the hennes

H2 – The quick brown fox jumps over the lazy dog and searches for the hennes

H3 – The quick brown fox jumps over the lazy dog and searches for the hennes

Typography

Introduction paragraphs serve as the opening gateway to any written piece, setting the stage for what is to come. They are crucial in capturing the reader's attention and presenting the main idea or thesis of the text. A well-crafted introduction not only provides background information but also establishes the tone and direction for the rest of the work.

Normal text paragraphs serve as the basic building blocks of written communication, structuring information in a coherent and logical manner. Typically consisting of three or more sentences, they explore a single theme or idea, facilitating clear understanding for the reader. The use of varied sentence lengths and transitional phrases within paragraphs enhances readability and keeps the reader engaged.

Effective paragraphs often begin with a topic sentence that outlines the main idea, followed by supporting sentences that elaborate on this concept with details, examples, or arguments. Concluding sentences are also important, as they summarize the key points and provide a smooth transition to the next paragraph, maintaining the flow of the text.


Fine print text, often found in contracts, advertisements, and legal documents, is characterized by its smaller font size and dense wording, making it less noticeable to readers. This text typically contains crucial information, such as disclaimers, terms and conditions, or limitations, which can significantly impact the understanding and consequences of the main content. The term "fine print" is frequently used metaphorically to refer to hidden details or catches in various situations, emphasizing the importance of thorough reading and understanding before agreement or commitment.
Text Decoration

strong (semantic)
bold (style related)
emphasis (semantic)
italicized (style related)
bold emphasis
bold italicized
subelement
supelement

mark
A11Y
code element
strikethrough
underlined

Lists

Bullet lists are a useful way to organize information. Here are five key purposes they serve:

  • Clarity: They break down information into easily digestible points, making complex topics more understandable.
  • Organization: Bullet lists help in organizing information in a structured manner, allowing readers to follow the flow of ideas or steps in a process.
  • Emphasis: By listing items, bullet points can emphasize important aspects or key takeaways, drawing the reader's attention to crucial elements.
  • Brevity: They allow for concise presentation of information, omitting unnecessary details and focusing on the core points.
  • Visual Appeal: Bullet lists improve the visual layout of a text, making it more engaging and easier to scan, as opposed to large blocks of text.

Numbered lists are also a highly effective way to present information. Here are five purposes they serve:

  1. Sequence and Order: Numbered lists are ideal for conveying a sense of sequence or priority, such as steps in a process or ranked items.
  2. Reference and Navigation: They allow for easy reference to specific points in a document, making it simpler for readers to navigate and refer back to particular items.
  3. Progression and Hierarchy: Numbered lists can indicate progression or hierarchy, showing how one point leads to another or how items are ranked in importance.
  4. Quantification: They inherently imply quantity, which can be useful for listing a specific number of points, reasons, tips, etc.
  5. Organization and Clarity: Similar to bullet lists, numbered lists help in organizing information clearly and concisely, but with the added layer of sequence or ranking.
Simple table
Nummer Produkt Anzahl
1 Äpfel 2
2 Birnen 5
3 Bananen 2
4 Pflaumen 10
Form fields
Basic elements
I am a description
I am a error message
Special fields
Selection fields
Radio Buttons
Checkbox (multi)
Advanced elements
Image
A description of the image showing a beautiful city scene
A description of the image showing a beautiful nature scene. Click on the image to open a lightbox.
Card
A card with title
A card with title and text

Cards in UX design are used for organizing and displaying content in small, digestible chunks.

  • Category
  • 2024-01-13
  • Lotti
I am a card with title, text and meta data

Cards in UX design are used for organizing and displaying content in small, digestible chunks.

  • Category
  • 2024-01-13
  • Lotti
I am a card with image, title, text and meta data

Cards in UX design are used for organizing and displaying content in small, digestible chunks.

  • Category
  • 2024-01-13
  • Lotti
I am a horizontal card

Cards in UX design are used for organizing and displaying content in small, digestible chunks.

  • Category
  • 2024-01-13
  • Lotti
I am a wide card

Cards in UX design are used for organizing and displaying content in small, digestible chunks.