{{template "base/head" .}}

Link

normal muted suppressed silenced

Button

Style:
State:
  • General purpose:

  • Recommended colors:

  • 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: {{TimeSince .TimeNow ctx.Locale}}
5s past: {{TimeSince .TimePast5s ctx.Locale}}
5s future: {{TimeSince .TimeFuture5s ctx.Locale}}
2m past: {{TimeSince .TimePast2m ctx.Locale}}
2m future: {{TimeSince .TimeFuture2m ctx.Locale}}
1y past: {{TimeSince .TimePast1y ctx.Locale}}
1y future: {{TimeSince .TimeFuture1y ctx.Locale}}

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

ComboMarkdownEditor

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

Tailwind CSS Demo

{{template "base/footer" .}}