Help:Formatting

This page explains how styling works on this wiki — what the ubuntu skin does for you automatically, and how to use the ubuntu-card layout blocks you see on the Main page.

Written in HTML

Like the Main page, card layouts are raw HTML classes inside the wikitext. They are not usable in the visual editor: edit them with edit source only.

Card layouts

All card classes are defined by the site skin/extension (module ext.ubuntu.styles) and must be attached to the exact element shown below — every rule is scoped like div.ubuntu-card, ul.ubuntu-card__list — and the whole thing must be wrapped in a collection:

<div class="ubuntu-card-collection">
  … one or more flow/row blocks …
</div>

Anatomy of a card

A card is a div.ubuntu-card with an optional uppercase eyebrow label, any normal content, and an optional list or button grid:

div.ubuntu-card — vertical stack (gap 0.85 rem), hairline top border; plain  renders at 0.95 rem
div.ubuntu-card__label — small bold uppercase title ("Featured categories")
ul.ubuntu-card__list — bulletless list, items divided by hairlines:
- <ul class="ubuntu-card__list"><li>[[Some page|Link text]]</li>…</ul>
div.ubuntu-card-button-links — grid of link-buttons (min width 9 rem each, wraps automatically)
span.ubuntu-card-button-link — one square-cornered button; its link inherits text colour (no blue), shows hover/press backgrounds, and gets an automatic external-link arrow on http(s) URLs
modifier ubuntu-card-button-link--icon-desktop / --icon-machines / --icon-containers — prepends the matching pragma icon

Example (how this page actually looks with those parts):

<div class="ubuntu-card-collection">
<div class="ubuntu-card-flow ubuntu-card-flow--grid">
<div class="ubuntu-card-flow__content">
<div class="ubuntu-card">
<div class="ubuntu-card__label">Using the wiki</div>
<p>This is a <code>div.ubuntu-card</code>: label, a paragraph, a link list and a button grid.</p>
<ul class="ubuntu-card__list">
<li>[[Help:Editing|Editing guidelines]]</li>
<li>[[Help:Templates|Frequently used templates]]</li>
</ul>
<div class="ubuntu-card-button-links">
<span class="ubuntu-card-button-link ubuntu-card-button-link--icon-desktop">
[[Help:Editing|Edit a page]]
</span>
<span class="ubuntu-card-button-link">
[https://docs.ubuntu.com Official docs]
</span>
</div>
</div>
<div class="ubuntu-card">
<div class="ubuntu-card__label">Plain card</div>
<p>A card with only text. On wide screens these two cards sit side by side; shrink the window to see them stack.</p>
</div>
</div>
</div>
</div>

Using the wiki

This is a div.ubuntu-card: label, a paragraph, a link list and a button grid.

Edit a page Official docs

Plain card

A card with only text. On wide screens these two cards sit side by side; shrink the window to see them stack.

Two layouts

Grid flow (Main page style — cards flow into columns, equal gap):

<div class="ubuntu-card-flow ubuntu-card-flow--grid">
 <div class="ubuntu-card-flow__content">
  <div class="ubuntu-card">
   <div class="ubuntu-card__label">Using the wiki</div>
   <p>Intro sentence.</p>
   <ul class="ubuntu-card__list">
    <li>[[Page A]]</li>
    <li>[[Page B]]</li>
   </ul>
  </div>
  <div class="ubuntu-card ubuntu-card--two-wide-fixed">
   <div class="ubuntu-card__label">Featured categories</div>
   <div class="ubuntu-card-button-links">
    <span class="ubuntu-card-button-link">[[:Category:Desktop|Desktop]]</span>
    <span class="ubuntu-card-button-link">[[:Category:Server|Server]]</span>
   </div>
  </div>
 </div>
</div>

Row (a single band of cards, up to 3 across):

<div class="ubuntu-card-row">
 <div class="ubuntu-card-row__content">
  <div class="ubuntu-card"> … </div>
  <div class="ubuntu-card ubuntu-card--two-wide"> … </div>
 </div>
</div>

Example — a row with one normal card and one double-width card:

Ubuntu is made for everyone

Double-width card

Has the --two-wide modifier: it spans two columns on wide screens, one on narrow ones.

Width modifiers and responsiveness

--two-wide — spans two columns when the block is wide enough; --two-wide-fixed always claims two columns of a grid flow. Both take width from --card-flow-wide-span/--card-row-wide-span (default 2).
--featured — forces 100% width (used for the Official documentation band).
Breakpoints are container queries (the container's width, not the viewport): the flow becomes 2 wide-capable columns at ≥ 37.5 rem and exactly 3 columns at ≥ 57.5 rem; rows 3 columns at ≥ 57.5 rem. Narrow screens stack to one column automatically — nothing to write.
The button grid special-cases 4 and 6 buttons into neat columns; 5 buttons look slightly ragged, prefer 2–4.

Link directory (label + buttons side by side)

<div class="ubuntu-card ubuntu-card--featured ubuntu-card-link-directory">
 <div class="ubuntu-card-link-directory__content">
  <div class="ubuntu-card__label">Official documentation</div>
  <p>Short description line.</p>
  <div class="ubuntu-card-button-links">
   <span class="ubuntu-card-button-link">https://ubuntu.com/desktop/docs Desktop</span>
  </div>
 </div>
</div>

On wide containers the label + paragraph sit left and the button grid fills the right; on narrow ones everything stacks.

Example:

Help pages

This band is the ubuntu-card-link-directory variant.

Gotchas when writing cards in wikitext

Blank lines between ubuntu-card-button-link spans are fine — the skin unwraps the generated  tags (display:contents), which is exactly what the Main page does.
A wikitext link with a leading colon (…) links to the category instead of filing the page into it.
Put one icon inline in a button link as  if you want full icon choice (all 165 icons); the --icon-* modifiers only exist for the three above.
Do not use cards for ordinary article content — they are for portal/hub pages. Regular pages should stay with the semantics below.

Message boxes

Add notices with the Mbox template (shorthands {{Tip}}, {{warning}} exist too). It renders the accent bar, status icon and label:

{{Mbox
| type  = warning
| label = Back up first
| text  = This procedure rewrites the partition table.
}}

Which renders as:

Back up first

This procedure rewrites the partition table.

Available type values: note, info, tip, doccan, warning, danger and ubuntu (orange, community announcements). All seven, rendered:

Note

Blue accent, information icon.

Info

Also blue — for factual information.

Tip

Green — optional goodness.

Doccan

Green — content also in the official docs.

Warning

Amber — proceed with care.

Danger

Red — destructive action.

Ubuntu

Orange — community or wiki news.

Tables, code and headings

Tables: class="wikitable" gives the full theme treatment (collapsed hairline borders, grey centred headers). No other classes needed.
Inline commands: <code>; blocks: <syntaxhighlight> (rendered in Ubuntu Sans Mono). div.ubuntu-code-block (adds a copy button) is interface-only — avoid on content pages.
The page title is the H1: sections start at == … ==.
Headings get the skin's underline and sticky-anchor offset for free.

Example — source:

{| class="wikitable"
! Release !! Supported until
|-
| 24.04 LTS || April 2026 (desktop)
|-
| 26.04 LTS || April 2029
|}

rendered:

Release	Supported until
24.04 LTS	April 2026 (desktop)
26.04 LTS	April 2029

Example code block — source:

<syntaxhighlight lang="bash">
sudo apt update && sudo apt upgrade
</syntaxhighlight>

rendered:

sudo apt update && sudo apt upgrade

Colour tokens

If you must style inline (usually inside templates), use these custom properties so night mode keeps working — the skin redefines every one of them under html.skin-theme-clientpref-night:

--vf-color-ubuntu              #e95420  brand orange
--vf-color-link-default        #06c
--vf-color-text-muted          rgba(0,0,0,0.6)
--vf-color-border-information  #24598f  blue  (note/info)
--vf-color-border-positive     #0e8420  green (tip/doccan)
--vf-color-border-caution      #cc7900  amber (warning)
--vf-color-border-negative     #c7162b  red   (danger)
--ubuntu-icon-size             1.25rem  (override per icon span)

Example — source … renders: brand orange text, correct in night mode too.

Things to avoid

Hardcoded hex colours, horizontal rules (<hr>/----) and one-off <style> blocks — the skin already covers these and each breaks dark mode or the layout rhythm.
MediaWiki-user CSS pages don't exist on this wiki (MediaWiki:Common.css is unset); site styling is code-shipped and can only be changed in the skin/extension repos.