The text component

A paragraph of text. The entire component will render as a single paragraph, with each item being rendered as a span of text inside it, the styling of which can be customized using parameters.

Top-level parameters

name required type description
center

BOOLEAN

Whether to center the title.
contents

TEXT

A top-level paragraph of text to display, without any formatting, without having to make additional queries.
contents_md

TEXT

Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com).
html

TEXT

Raw html code to include on the page. Don't use that if you are not sure what you are doing, it may have security implications.
id

TEXT

id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
title

TEXT

Text header before the paragraph.
width

INTEGER

How wide the paragraph should be, in characters.

Row-level parameters

name required type description
contents REQUIRED

TEXT

A span of text to display
bold

BOOLEAN

Whether the span of text should be displayed as bold.
break

BOOLEAN

Indicates that the current span of text starts a new paragraph.
code

BOOLEAN

Use a monospace font. Useful to display the text as code.
color

COLOR

The name of a color for this span of text.
contents_md

TEXT

Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com).
italics

BOOLEAN

Whether the span of text should be displayed as italics.
link

URL

An URL to which the user should be taken when they click on this span of text.
size

INTEGER

A number between 1 and 6 indicating the font size.
underline

BOOLEAN

Whether the span of text should be underlined.

Example 1

Rendering a simple text paragraph.

select 
    'text'              as component,
    'Hello, world ! <3' as contents;

Result

Hello, world ! <3

Example 2

Rendering rich text using markdown

select 
    'text' as component,
    '
# Markdown in SQLPage

## Simple formatting

SQLPage supports only plain text as column values, but markdown allows easily adding **bold**, *italics*, [external links](https://github.com/sqlpage/SQLPage), [links to other pages](/index.sql) and [intra-page links](#my-paragraph). 

## Lists
### Unordered lists
* SQLPage is easy
* SQLPage is fun
* SQLPage is free

### Ordered lists
1. SQLPage is fast
2. SQLPage is safe
3. SQLPage is open-source

## Code
```sql
SELECT ''list'' AS component;
SELECT name as title FROM users;
```

## Tables

| SQLPage component | Description  | Documentation link  |
| --- | --- | --- |
| text | A paragraph of text. | [Documentation](https://sql-page.com/documentation.sql?component=text) |
| list | A list of items. | [Documentation](https://sql-page.com/documentation.sql?component=list) |
| steps | A progress indicator. | [Documentation](https://sql-page.com/documentation.sql?component=steps) |
| form | A series of input fields. | [Documentation](https://sql-page.com/documentation.sql?component=form) |

## Quotes
> Fantastic.
>
> — [HackerNews User](https://news.ycombinator.com/item?id=36194473#36209061) about SQLPage

## Images
![SQLPage logo](https://sql-page.com/favicon.ico)

## Horizontal rules
---

' as contents_md;

Result

Markdown in SQLPage

Simple formatting

SQLPage supports only plain text as column values, but markdown allows easily adding bold, italics, external links, links to other pages and intra-page links.

Lists

Unordered lists

  • SQLPage is easy
  • SQLPage is fun
  • SQLPage is free

Ordered lists

  1. SQLPage is fast
  2. SQLPage is safe
  3. SQLPage is open-source

Code

SELECT 'list' AS component;
SELECT name as title FROM users;

Tables

SQLPage component Description Documentation link
text A paragraph of text. Documentation
list A list of items. Documentation
steps A progress indicator. Documentation
form A series of input fields. Documentation

Quotes

Fantastic.

HackerNews User about SQLPage

Images

SQLPage logo

Horizontal rules


Example 3

Rendering a paragraph with links and styling.

select 
    'text'      as component,
    'About SQL' as title;
select 
    'SQL' as contents,
    TRUE  as bold,
    TRUE  as italics;
select 
    ' is a domain-specific language used in programming and designed for managing data held in a ' as contents;
select 
    'relational database management system' as contents,
    'https://en.wikipedia.org/wiki/Relational_database' as link;
select 
    '. It is particularly useful in handling structured data.' as contents;

Result

About SQL

SQL is a domain-specific language used in programming and designed for managing data held in a relational database management system. It is particularly useful in handling structured data.

Example 4

An intra-page link to a section of the page.

select 
    'text' as component,
    'This is a link to the [next paragraph](#my-paragraph). You can open this link in a new tab and the page will scroll to the paragraph on load.' as contents_md;
select 
    'text'         as component,
    'my-paragraph' as id,
    'This **is** the next paragraph.' as contents_md;

Result

This is a link to the next paragraph. You can open this link in a new tab and the page will scroll to the paragraph on load.

This is the next paragraph.

See also: other components