[Sugester V2 EN](https://sugester.intum.pl/kb/sugester-v2-en.md) / [CMS](https://sugester.intum.pl/kb/sugester-v2-en/cms.md)

# [Paragraphs - creating page sections](https://sugester.intum.pl/kb/sugester-v2-en/paragraphs-creating-page-sections.md)

Paragraphs are HTML content blocks that make up the page's content.

## Paragraph Structure

<table>
<tr><th>Field</th><th>Description</th></tr>
<tr><td><code>name</code></td><td>Identifying name (e.g. "Hero PL")</td></tr>
<tr><td><code>kind</code></td><td>Type - usually <code>text</code> for HTML</td></tr>
<tr><td><code>priority</code></td><td>Order: 100 = first, 50 = middle, 10 = last</td></tr>
<tr><td><code>content</code></td><td>HTML content</td></tr>
<tr><td><code>page_id</code></td><td>Page ID (or assignment via paragraph_subjects)</td></tr>
</table>
## Priority and Order

Paragraphs are sorted in descending order by `priority`:

```
Priority 100 → Hero (top of the page)
Priority 80  → Features
Priority 60  → Pricing
Priority 40  → Testimonials
Priority 20  → Contact Form
Priority 10  → Footer CTA (bottom of the page)
```

## Sample Sections

### Hero Section
```html
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-950 to-emerald-950">
  <div class="text-center px-6">
    <h1 class="text-5xl font-bold text-white mb-4">{{ title }}</h1>
    <p class="text-xl text-slate-300 mb-8">{{ tagline }}</p>
    <a href="#contact" class="bg-emerald-500 text-white px-8 py-3 rounded-full">
      Get Started
    </a>
  </div>
</section>
```

### Features Grid
```html
<section class="py-20 bg-slate-900">
  <div class="max-w-6xl mx-auto px-6">
    <h2 class="text-3xl font-bold text-center text-white mb-12">Features</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <div class="bg-slate-800 p-6 rounded-xl">
        <div class="text-emerald-400 text-4xl mb-4">📊</div>
        <h3 class="text-xl font-semibold text-white mb-2">Monitoring</h3>
        <p class="text-slate-400">Real-time data tracking</p>
      </div>
      <!-- more cards... -->
    </div>
  </div>
</section>
```

### Contact Form (with Sugester 2 Forms)
```html
<section id="contact" class="py-20 bg-slate-950">
  <div class="max-w-md mx-auto px-6">
    <h2 class="text-3xl font-bold text-center text-white mb-8">Contact</h2>
    <div data-form="contact_form_id"></div>
  </div>
</section>
<script src="https://domena.com/form/embed.js"></script>
```

## Page Assignment

### Option 1: One paragraph = one page
Provide `page_id` when creating:
```json
{
  "paragraph": {
    "name": "Hero Dashboard PL",
    "page_id": 1030,
    "content": "..."
  }
}
```

### Option 2: One paragraph = multiple pages
Use the same paragraph on multiple pages via the UI (Assignments).

## Variables in Paragraphs

Paragraphs have access to page variables:
```html
<h1>{{ title }}</h1>
<p>{{ tagline }}</p>
<a href="mailto:{{ contact_email }}">{{ contact_label }}</a>
```

## Organization

### Naming Convention
```
[Section] [Page/Language]

Hero Dashboard PL
Hero Dashboard EN
Features MyCompany
Contact Form Universal
```

### Shared Paragraphs
For common elements (e.g. footer, testimonials), create one paragraph and assign it to multiple pages.

## Styling with Tailwind

The CMS loads Tailwind from a CDN, so you can use all classes:

```html
<div class="bg-gradient-to-r from-purple-600 to-purple-800 
            text-white p-8 rounded-2xl shadow-xl 
            hover:shadow-2xl transition-shadow">
  ...
</div>
```

## Debugging

If the paragraph does not display:
1. Check if it is assigned to the page
2. Check priority (it may be too low/high)
3. Check if the layout has `{% for p in paragraphs %}{{ p }}{% endfor %}`