{{template "base/head" .}}

Link

normal muted suppressed silenced

Button

Style:
State:
  • General purpose:

  • Recommended colors:

  • Supported but not recommended:

    Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.

  • Inline / Plain:

Buttons

Tooltip

text with tooltip
text with interactive tooltip

Loading

loading ...

loading ...

loading ...

loading ...

loading ...

<origin-url>

<overflow-menu>

GiteaAbsoluteDate

relative-time:

LocaleNumber

{{ctx.Locale.PrettyNumber 1}}
{{ctx.Locale.PrettyNumber 12}}
{{ctx.Locale.PrettyNumber 123}}
{{ctx.Locale.PrettyNumber 1234}}
{{ctx.Locale.PrettyNumber 12345}}
{{ctx.Locale.PrettyNumber 123456}}
{{ctx.Locale.PrettyNumber 1234567}}

TimeSince

Now: {{DateUtils.TimeSince .TimeNow}}
5s past: {{DateUtils.TimeSince .TimePast5s}}
5s future: {{DateUtils.TimeSince .TimeFuture5s}}
2m past: {{DateUtils.TimeSince .TimePast2m}}
2m future: {{DateUtils.TimeSince .TimeFuture2m}}
1y past: {{DateUtils.TimeSince .TimePast1y}}
1y future: {{DateUtils.TimeSince .TimeFuture1y}}

SVG alignment

Text with SVG

{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)
{{svg "octicon-alert"}} {{svg "octicon-x"}} text
(inline)
{{svg "octicon-alert"}} flex item with very very very very very very very very long content
{{svg "octicon-alert"}} flex every line
{{svg "octicon-alert"}} flex every item
{{svg "octicon-alert"}} flex item with very very very very very very very very long content

Button with SVG

123

Input with SVG

Dropdown with SVG


Button align with ...

Toast

ComboMarkdownEditor

ps: no JS code attached, so just a layout
{{template "shared/combomarkdowneditor" .}}

Tailwind CSS Demo

{{template "base/footer" .}}