Article Formatting

This includes various article formatting options available in the Archer One theme, along with the necessary code to implement them.

1. **Notes and Warnings**
- Blue-colored note boxes for important information
- Red-colored warning boxes for critical alerts
- Icons and styled containers for better visibility

2. **Lists**
- Styled numbered lists with circular number indicators
- Custom bullet lists with blue dots
- Proper spacing and indentation

To use these components in your articles, you can use the following HTML structures:

1. Information Callout:

Important Information

This is an informational note that highlights key details. For example: Make sure to save your changes before leaving the editor.

<!-- Info callout -->
<div class="callout callout--info">
   <h4 class="callout__title">Information</h4>
   <p>This is an informational message.</p>
</div>

2. Warning Callout:

Warning

This is a warning message that alerts users about potential issues. For example: Deleting a project cannot be undone.

<!-- Warning callout -->
<div class="callout callout--warning">
   <h4 class="callout__title">Warning</h4>
   <p>This is a warning message.</p>
</div>

3. Success Callout:

Success Tips

This is a success message that highlights best practices or positive outcomes. For example: Your changes have been saved successfully.

<!-- Success callout -->
<div class="callout callout--success">
   <h4 class="callout__title">Success</h4>
   <p>This is a success message.</p>
</div>

4. Numbered Lists (for step-by-step instructions):

1. First step of the process
2. Second step with more details
   1. Sub-step A
   2. Sub-step B
3. Final step of the process

<!-- Numbered Lists -->
<ol class="article-body ol">
   <li>First step of the process</li>
   <li>Second step with more details
    <ol>
       <li>Sub-step A</li>
       <li>Sub-step B</li>
    </ol>
    </li>
    <li>Final step of the process</li>
</ol>

5. Bullet Lists (for unordered items):

• Key feature one
• Important point two
  • Sub-point A
  • Sub-point B
• Final point

<!-- Bullet Lists -->
<ul class="article-body ul">
   <li>Key feature one</li>
   <li>Important point two
   <ul>
      <li>Sub-point A</li>
      <li>Sub-point B</li>
   </ul>
   </li>
   <li>Final point</li>
</ul>