Text

The text components provide styling for text elements.

Note

Most style definitions of this component are restricted to direct descendants.

template django_logikal/components/text.html.j

Usage:

{% import 'django_logikal/components/text.html.j' as text %}
{% block component_head %}{{ component_head('text') }}{% endblock %}

Components:

macro text.paragraph(faker, sentences=5)

Generate a paragraph worth of fake text.

Example

Jinja

{% set faker = faker_factory() %}
<p>{{ text.paragraph(faker) }}</p>

HTML

<p>
  Serious inside else memory if six. Whose group through despite cause. Sense
  peace economy travel. Total financial role together range line beyond its.
  Policy daughter need kind miss artist truth trouble.
</p>

Short-form Text

Example

Jinja

{% import 'django_logikal/components/text.html.j' as text %}
{% set faker = faker_factory() %}

<article class="text">
  <h1>Short-form Text</h1>
  <p>{{ text.paragraph(faker) }}</p>
  <p>{{ text.paragraph(faker) }}</p>

  <h2>Text Heading</h2>
  <p>{{ text.paragraph(faker) }}</p>

  <h3>Text Subheading</h3>
  <p>{{ text.paragraph(faker) }}</p>

  <ul>
    <li>First item in an unordered list</li>
    <li>Second item</li>
  </ul>

  <p>{{ text.paragraph(faker) }}</p>

  <ol>
    <li>First item in an ordered list</li>
    <li>Second item</li>
  </ol>

  <p>{{ text.paragraph(faker) }}</p>
</article>

HTML

<article class="text">
  <h1>Short-form Text</h1>
  <p>
    Serious inside else memory if six. Whose group through despite cause. Sense
    peace economy travel. Total financial role together range line beyond its.
    Policy daughter need kind miss artist truth trouble.
  </p>
  <p>
    Rest human station property. Partner stock four. Region as true develop
    sound central. Language ball floor meet usually board necessary. Natural
    sport music white.
  </p>

  <h2>Text Heading</h2>
  <p>
    Natural explain before something first drug contain start. Party prevent
    live. Quickly candidate change although. Together type music hospital. Every
    speech support time operation wear often.
  </p>

  <h3>Text Subheading</h3>
  <p>
    Manage political record word group food break. Picture suddenly drug rule
    bring determine some forward. Beyond chair recently and. Plant view own
    available buy country store. Hospital have wonder already.
  </p>

  <ul>
    <li>First item in an unordered list</li>
    <li>Second item</li>
  </ul>

  <p>
    Create wife responsibility. Decision song view age international big
    employee. Author feeling job article level. Beyond write current grow rule
    stuff truth college. Whom around put suddenly garden.
  </p>

  <ol>
    <li>First item in an ordered list</li>
    <li>Second item</li>
  </ol>

  <p>
    Bring TV program actually race. Themselves true power home price check real.
    Score from animal exactly drive well good. Pull opportunity throughout take
    car. Hold increase practice ability court.
  </p>
</article>

Long-form Text

Example

Jinja

{% import 'django_logikal/components/text.html.j' as text %}
{% set faker = faker_factory() %}

<article class="text long-form">
  <h1>Long-form Text</h1>
  <p>{{ text.paragraph(faker) }}</p>
  <p>{{ text.paragraph(faker) }}</p>

  <h2>Text Heading</h2>
  <p>{{ text.paragraph(faker) }}</p>
  <p>{{ text.paragraph(faker) }}</p>

  <h3>Text Subheading</h3>
  <p>{{ text.paragraph(faker) }}</p>
  <p>{{ text.paragraph(faker) }}</p>

  <ul>
    <li>First item in an unordered list</li>
    <li>Second item</li>
  </ul>

  <p>{{ text.paragraph(faker) }}</p>

  <ol>
    <li>First item in an ordered list</li>
    <li>Second item</li>
  </ol>

  <p>{{ text.paragraph(faker) }}</p>
</article>

HTML

<article class="text long-form">
  <h1>Long-form Text</h1>
  <p>
    Serious inside else memory if six. Whose group through despite cause. Sense
    peace economy travel. Total financial role together range line beyond its.
    Policy daughter need kind miss artist truth trouble.
  </p>
  <p>
    Rest human station property. Partner stock four. Region as true develop
    sound central. Language ball floor meet usually board necessary. Natural
    sport music white.
  </p>

  <h2>Text Heading</h2>
  <p>
    Natural explain before something first drug contain start. Party prevent
    live. Quickly candidate change although. Together type music hospital. Every
    speech support time operation wear often.
  </p>
  <p>
    Manage political record word group food break. Picture suddenly drug rule
    bring determine some forward. Beyond chair recently and. Plant view own
    available buy country store. Hospital have wonder already.
  </p>

  <h3>Text Subheading</h3>
  <p>
    Create wife responsibility. Decision song view age international big
    employee. Author feeling job article level. Beyond write current grow rule
    stuff truth college. Whom around put suddenly garden.
  </p>
  <p>
    Bring TV program actually race. Themselves true power home price check real.
    Score from animal exactly drive well good. Pull opportunity throughout take
    car. Hold increase practice ability court.
  </p>

  <ul>
    <li>First item in an unordered list</li>
    <li>Second item</li>
  </ul>

  <p>
    Civil development large report purpose themselves. I reduce industry. Close
    ask reduce. Month maintain no sense this manager fine. Anyone state wind
    indeed nature white without.
  </p>

  <ol>
    <li>First item in an ordered list</li>
    <li>Second item</li>
  </ol>

  <p>
    Would I question first. Add senior woman put partner. Budget power them
    evidence without. Little type physical against. Son break either president
    stage population boy.
  </p>
</article>

Modifiers

• The code modifier class increases the maximum width of the text block (which is calibrated for proportional text). This is useful for article blocks that only contain monospaced code.

• The wide modifier class removes the maximum width limitation from the text block entirely, which can be useful for sections that contain a mixed set of elements (e.g. cards). Nonetheless, text blocks should still be restricted in width by targeted application of the text class.

• The title, subtitle, heading and subheading classes can be used to format headings regardless of their HTML heading level.

Block Elements

Code Block

Example

Jinja

{% import 'django_logikal/components/text.html.j' as text %}
{% set faker = faker_factory() %}

<article class="text">
  <h1>Code Block</h1>
  <p>{{ text.paragraph(faker) }}</p>

  <pre><code>def main():
     print('Hello World')</code></pre>

  <p>{{ text.paragraph(faker) }}</p>
</article>

HTML

<article class="text">
  <h1>Code Block</h1>
  <p>
    Serious inside else memory if six. Whose group through despite cause. Sense
    peace economy travel. Total financial role together range line beyond its.
    Policy daughter need kind miss artist truth trouble.
  </p>

  <pre><code>def main():
     print('Hello World')</code></pre>

  <p>
    Rest human station property. Partner stock four. Region as true develop
    sound central. Language ball floor meet usually board necessary. Natural
    sport music white.
  </p>
</article>

Block Quote

Example

Jinja

{% import 'django_logikal/components/text.html.j' as text %}
{% set faker = faker_factory() %}

<article class="text">
  <h1>Block Quote</h1>
  <p>{{ text.paragraph(faker) }}</p>

  <figure>
    <blockquote>
      <p>
        “And hast thou slain the Jabberwock?<br>
        Come to my arms, my beamish boy!<br>
        O frabjous day! Callooh! Callay!”
      </p>
    </blockquote>
    <figcaption>– <cite>Lewis Carroll</cite></figcaption>
  </figure>

  <p>{{ text.paragraph(faker) }}</p>
</article>

HTML

<article class="text">
  <h1>Block Quote</h1>
  <p>
    Serious inside else memory if six. Whose group through despite cause. Sense
    peace economy travel. Total financial role together range line beyond its.
    Policy daughter need kind miss artist truth trouble.
  </p>

  <figure>
    <blockquote>
      <p>
        “And hast thou slain the Jabberwock?<br />
        Come to my arms, my beamish boy!<br />
        O frabjous day! Callooh! Callay!”
      </p>
    </blockquote>
    <figcaption>– <cite>Lewis Carroll</cite></figcaption>
  </figure>

  <p>
    Rest human station property. Partner stock four. Region as true develop
    sound central. Language ball floor meet usually board necessary. Natural
    sport music white.
  </p>
</article>

Table

Example

Jinja

{% import 'django_logikal/components/text.html.j' as text %}
{% set faker = faker_factory() %}

<article class="text">
  <h1>Table</h1>
  <p>{{ text.paragraph(faker) }}</p>

  <table>
    <thead>
      <tr>
        <th>Status</th>
        <th>Name</th>
        <th>Start Date</th>
        <th>End Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Started</td>
        <td>Some project</td>
        <td>2026-07-01</td>
        <td>open-ended</td>
      </tr>
      <tr>
        <td>Completed</td>
        <td>Other project</td>
        <td>2026-07-01</td>
        <td>2026-08-31</td>
      </tr>
    </tbody>
  </table>

  <p>{{ text.paragraph(faker) }}</p>
</article>

HTML

<article class="text">
  <h1>Table</h1>
  <p>
    Serious inside else memory if six. Whose group through despite cause. Sense
    peace economy travel. Total financial role together range line beyond its.
    Policy daughter need kind miss artist truth trouble.
  </p>

  <table>
    <thead>
      <tr>
        <th>Status</th>
        <th>Name</th>
        <th>Start Date</th>
        <th>End Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Started</td>
        <td>Some project</td>
        <td>2026-07-01</td>
        <td>open-ended</td>
      </tr>
      <tr>
        <td>Completed</td>
        <td>Other project</td>
        <td>2026-07-01</td>
        <td>2026-08-31</td>
      </tr>
    </tbody>
  </table>

  <p>
    Rest human station property. Partner stock four. Region as true develop
    sound central. Language ball floor meet usually board necessary. Natural
    sport music white.
  </p>
</article>