The blocks of an e-mail that say something apart from the text: a tinted notice (this was not you, the link works only once) and the highlighted card that points to one thing to read next.
Both are one-cell tables with a 12 px radius, the way a client draws them. The tints are the same five tones as
DevactionUI.EmailTag; the card has its own warm one. They keep their light tint in dark mode, so the text
inside keeps its tone color.
Summary
Functions
A tinted notice, with an optional bold lead. It keeps its light tint in dark mode, so an
DevactionUI.Email.emphasis/1 inside it needs surface={:tint}.
A warm card that points to one thing: a caption, a linked title and a line of detail.
Functions
@spec callout(map()) :: Phoenix.LiveView.Rendered.t()
A tinted notice, with an optional bold lead. It keeps its light tint in dark mode, so an
DevactionUI.Email.emphasis/1 inside it needs surface={:tint}.
Example
<.callout tone={:risk} lead="Was it not you?">
Reset your password now.
</.callout>Attributes
tone(:atom) - what the notice means, which sets its border, background and text. Defaults to:neutral. Must be one of:risk,:warn,:ok,:info, or:neutral.lead(:string) - a bold first phrase, in the ink color. Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
@spec highlight(map()) :: Phoenix.LiveView.Rendered.t()
A warm card that points to one thing: a caption, a linked title and a line of detail.
Example
<.highlight
label="SUGGESTED LESSON"
title="Idempotency in Oban jobs"
href="https://acme.test/lessons/42"
meta="12 min · Elixir"
/>Attributes
label(:string) (required) - the mono caption on top, in capitals.title(:string) (required) - the bold line, which is the link.href(:string) (required) - where the title leads.meta(:string) (required) - the small line under the title.- Global attributes are accepted.