Documents Live, a web authoring and publishing system
If you see this, something is wrong
Table of contents
First published on Friday, Sep 12, 2025 and last modified on Saturday, May 30, 2026 by François Chaplais.
1 Introduction
Cards are common web page component which provide a decent layout for simple content. Here is an example.
Why cats are cute
Cats are so cute because their features and behaviors trigger our instinctive affection—large, round eyes, soft fur, and tiny, agile paws all resemble the characteristics we find endearing in human babies. Their playful curiosity, gentle purring, and comically expressive faces add to their charm, making them both entertaining and heartwarming companions. Whether they are stretching luxuriously in a sunny spot or kneading a blanket with contentment, cats effortlessly invite our warmth and attention, blending innocence with mystery in a way that irresistibly appeals to our sense of delight.
Here is the code.
\begin{card}
\begin{image}
\includegraphics{cute-cat-with-blue-eyes-2024-10-14-17-06-59-utc.jpg}
\end{image}
\begin{header}
\Large{\bf{Why cats are cute}}
\end{header}
\begin{body}
... body content ...
\end{body}
\begin{footer}
\em{This opinion has been produced by AI.}
\end{footer}
\end{card}Summary 1 (card components)
A card has four components.
- an optional image
- an optional header
- a mandatory body
- an optional footer
Each of these parts is a Documents Live chunk.
2 Documents Live chunks
2.1 Usage
Chunks are components of Documents Live widgets such as cards.
Each chunk can include one or more of the following Documents Live terminal object types.
- paragraphs
- simple lists
- media and image links
- equations
- figures
- charts
- all kinds of table
2.2 Styling
Each chunk can be styled using the rules detailed in the lesson about the latexDiv .
3 Advanced example
We use the same card as before and add style to the header and the footer.
Why cats are cute
Cats are so cute because their features and behaviors trigger our instinctive affection—large, round eyes, soft fur, and tiny, agile paws all resemble the characteristics we find endearing in human babies. Their playful curiosity, gentle purring, and comically expressive faces add to their charm, making them both entertaining and heartwarming companions. Whether they are stretching luxuriously in a sunny spot or kneading a blanket with contentment, cats effortlessly invite our warmth and attention, blending innocence with mystery in a way that irresistibly appeals to our sense of delight.
The styling has been defined using the Documents Live style environment. Here is the header code.
\begin{header}
\begin{style}
\background{black}
\textcolor{white}
\end{style}
\Large{\bf{Why cats are cute}}
\end{header}Here is the footer code.
\begin{footer}
\begin{style}
\background{black}
\textcolor{white}
\border{red 8}
\end{style}
\em{This opinion has been produced by AI.}
\end{footer}
Remark the card is itself inside a latexDiv with the following styling.
\begin{latexDiv}
\begin{style}
\width{70}
\end{style}
... card code ...
\end{latexDiv}Now an example with a background that can be used as a remplate for sliders .
Header text
Facilis omnis omnis molestias eos. Unde deserunt officiis magnam libero. Iusto facere optio laborum. Veniam quia commodi sit corrupti maiores quis.