Page Markup and Typography

Our theme comes with built-in "Shortcodes" (CSS Utility Classes) that let you style your content without writing complex code. Simply copy the HTML snippets below into the "HTML View" of your post.

---

1. Action Buttons

Use buttons to drive clicks to downloads, links, or sign-ups.

Download Now Learn More Buy Premium

<a href="#" class="action-btn">Button Text</a>
<a href="#" class="action-btn outline">Outline Button</a>
<a href="#" class="action-btn large">Large Button</a>

---

2. Alert Messages

Highlight important information, success messages, or warnings.

Success: Your download has started successfully!

Info: New update version 2.0 is available.

Warning: This action cannot be undone.

Error: Invalid license key provided.

<div class="alert-message alert-success">
  <i class="fas fa-check-circle"></i> Success Message...
</div>

(Replace 'alert-success' with 'alert-info', 'alert-warning', or 'alert-error')

---

3. Dropcaps

Add a stylish dropcap to the beginning of your articles.

This is an example of a paragraph starting with a Dropcap. The large letter grabs attention and adds a magazine-style look to your writing.

<span class="drop-cap">F</span>irst letter...

---

4. Code Box

Display code snippets in a stylish dark box.

// Example Code console.log("Welcome to PremiumOne");

<div class="code-box">
  Your Code Here...
</div>

---

5. Two Columns

Create a responsive two-column layout within your post.

Column 1

This is the first column content.

Column 2

This is the second column content.

<div class="row">
  <div style="flex:1; margin-right:15px;">Column 1</div>
  <div style="flex:1;">Column 2</div>
</div>