Hex doc
Phoenix
Size
Use class="text-{size}" to set the text size of a code.
Available options: xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
sm
defmodule Demo do
@moduledoc false
def run, do: :ok
end
md
defmodule Demo do
@moduledoc false
def run, do: :ok
end
lg
defmodule Demo do
@moduledoc false
def run, do: :ok
end
xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
2xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
3xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
4xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
5xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
6xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
7xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
8xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
9xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
<.code class="code text-xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-sm" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-lg" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-2xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-3xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-4xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-5xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-6xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-7xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-8xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code text-9xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
Rounded
Use class="ui-rounded-{step}" to set the corner radius of a code.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
none
defmodule Demo do
@moduledoc false
def run, do: :ok
end
xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
sm
defmodule Demo do
@moduledoc false
def run, do: :ok
end
md
defmodule Demo do
@moduledoc false
def run, do: :ok
end
lg
defmodule Demo do
@moduledoc false
def run, do: :ok
end
xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
2xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
3xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
4xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
full
defmodule Demo do
@moduledoc false
def run, do: :ok
end
<.code class="code ui-rounded-none" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code ui-rounded-xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code ui-rounded-sm" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code ui-rounded-md" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code ui-rounded-lg" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code ui-rounded-xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code ui-rounded-2xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code ui-rounded-3xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code ui-rounded-4xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code ui-rounded-full" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
Max width
Without max-w-*, width comes from component CSS. Default for code: none (width: auto).
Use class="max-w-{step}" to set the maximum width of a code root.
Available options: none (default), full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
default (none)
defmodule Demo do
@moduledoc false
def run, do: :ok
end
none
defmodule Demo do
@moduledoc false
def run, do: :ok
end
full
defmodule Demo do
@moduledoc false
def run, do: :ok
end
9xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
8xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
7xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
6xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
5xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
4xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
3xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
2xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
xs
defmodule Demo do
@moduledoc false
def run, do: :ok
end
sm
defmodule Demo do
@moduledoc false
def run, do: :ok
end
md
defmodule Demo do
@moduledoc false
def run, do: :ok
end
lg
defmodule Demo do
@moduledoc false
def run, do: :ok
end
xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
2xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
3xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
4xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
5xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
6xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
7xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
8xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
9xl
defmodule Demo do
@moduledoc false
def run, do: :ok
end
<.code class="code" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-none" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-full" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-9xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-8xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-7xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-6xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-5xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-4xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-3xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-2xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-xs" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-sm" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-md" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-lg" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-2xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-3xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-4xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-5xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-6xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-7xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-8xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />
<.code class="code max-w-9xl" language={:elixir} code={"defmodule Demo do\n @moduledoc false\n def run, do: :ok\nend\n"} />