Atomic-Library

.h1--claim

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

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

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

.lead

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.

strong (semantic)
bold (style related)
emphasis (semantic)
italicized (style related)
bold emphasis
bold italicized
sub_element
sup^element

mark
A11Y
code element
~~strikethrough~~
underlined

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:

Sequence and Order: Numbered lists are ideal for conveying a sense of sequence or priority, such as steps in a process or ranked items.
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.
Progression and Hierarchy: Numbered lists can indicate progression or hierarchy, showing how one point leads to another or how items are ranked in importance.
Quantification: They inherently imply quantity, which can be useful for listing a specific number of points, reasons, tips, etc.
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.

Inline text link
Inline text link bold
Inline text link italic
Inline text link bold italic

Primary Button Secondary Button Tertiary Button

Small Primary Button Small Secondary Button Small Tertiary Button

Primary Button Full Width Secondary Button Full Width Tertiary Button Full Width

Tabellenüberschrift
Nummer	Produkt	Anzahl
1	Äpfel	2
2	Birnen	5
3	Bananen	2
4	Pflaumen	10

Basic elements

Standard Input* I am a description

Invalid input I am a error message

Textarea

Password

Special fields

E-Mail address

Phone number

URL / Link

Number field

Date

Selection fields

A normal checkbox

Select

First option

Second option

Third option

Checkbox (multi)

Option number 1

Option number 2

Option number 3

Multiple selection

Advanced elements

File upload

Image Upload

Disabled Input

Success alerts are used to inform users that an action has been completed successfully, such as a file upload or a form submission. They provide positive feedback that encourages user interaction and fosters a sense of achievement. These alerts often appear after a user has achieved a goal, reinforcing the successful outcome and enhancing the user experience.

Error alerts notify users when something has gone wrong, such as a failed login attempt or an inability to connect to a server. They are crucial for guiding users to understand what mistake has been made and, ideally, how to correct it. Employing error alerts helps prevent user frustration by offering clear, actionable feedback on how to resolve the issue at hand.

Info alerts are designed to provide users with additional information or context about a page or process, without indicating a success or failure. They can be used to draw attention to updates, system statuses, or helpful tips. Info alerts serve as a gentle way to guide users through a website or application, ensuring they are well-informed and can make the most out of the available features.