Components

Every tag sevk Markup understands, with the attributes it accepts. Style attributes accept any CSS value; sevk inlines them onto the generated HTML.

Layout

Layout tags build the table skeleton of the email. Order matters: <container> centers, <section> paints backgrounds, <row> / <column> split width.

mail

Root element. <email> is an accepted synonym.

<mail lang="en" dir="ltr">
  <head>
    <title>Welcome</title>
    <preview>Tap below to get started.</preview>
  </head>
  <body>
    <!-- content -->
  </body>
</mail>

Name	Type	Description
`lang`	string	BCP-47 language code (default "en")
`dir`	string	ltr or rtl (default "ltr")

section

Full-width band. The place to put background colors and large padding.

<section padding="40px 20px" background-color="#f5f5f5">
  <!-- content -->
</section>

Name	Type	Description
`background-color`	string	Any CSS color
`background-image`	string	Raw image URL; the renderer wraps it in url('...') itself
`padding`	string	Shorthand or longhand
`margin`	string	Shorthand or longhand
`text-align`	string	left \| center \| right
`border`	string	Border shorthand
`border-radius`	string	Rounded corners

container

Centers content with a max width. Use inside a <section> for the classic 600px email layout.

<section padding="40px 20px" background-color="#f5f5f5">
  <container max-width="600px">
    <!-- centered content -->
  </container>
</section>

Name	Type	Description
`max-width`	string	No render-time default; set it explicitly (600px is the email-safe convention)
`padding`	string
`margin`	string
`background-color`	string
`border`	string
`border-radius`	string

row + column

<row> holds <column>s side by side on desktop; on viewports narrower than 480px they stack. If you pass a gap, sevk inserts spacer cells between columns and adds mobile styles that turn the gap into vertical spacing.

<row gap="16px" padding="10px 0">
  <column>
    <section padding="20px" background-color="#e3f2fd" border-radius="8px">
      <paragraph>Left</paragraph>
    </section>
  </column>
  <column>
    <section padding="20px" background-color="#e8f5e9" border-radius="8px">
      <paragraph>Right</paragraph>
    </section>
  </column>
</row>

Name	Type	Description
`gap`	string	Desktop gap between columns (row only)
`padding`	string
`background-color`	string
`border`	string
`border-radius`	string
`width`	string	Column width: percentage or pixels
`vertical-align`	string	Column vertical align (default top)

Typography

heading

<heading level="1" color="#1a1a1a" font-size="28px">Welcome</heading>
<heading level="2" color="#5227FF" font-size="22px">Section title</heading>
<heading level="3">Subsection</heading>

Name	Type	Description
`level`	string	1 to 6 (default 1)
`color`	string
`font-size`	string
`font-weight`	string
`line-height`	string
`text-align`	string
`margin`	string
`padding`	string

paragraph

<paragraph color="#666666" font-size="16px" line-height="1.6">
  Body copy. Can contain <text color="#5227FF" font-weight="bold">inline text</text>
  and <link href="https://sevk.io" color="#5227FF">links</link>.
</paragraph>

Name	Type	Description
`color`	string
`font-size`	string
`line-height`	string
`text-align`	string
`margin`	string
`padding`	string
`background-color`	string

text

Inline span for styling fragments inside a paragraph or heading.

<paragraph>
  Normal copy with a <text color="#5227FF" font-weight="bold">highlighted word</text>.
</paragraph>

Name	Type	Description
`color`	string
`font-size`	string
`font-weight`	string

link

<paragraph>
  Read more on our <link href="https://sevk.io" color="#5227FF">website</link>.
</paragraph>

Name	Type	Description
`href`required	string	Destination URL
`target`	string	Default _blank
`color`	string
`font-size`	string

Media

image

Self-closing. Always set alt; image-blocking clients (and accessibility tools) rely on it.

<!-- Block image -->
<image
  src="https://example.com/hero.png"
  alt="Hero illustration"
  width="600px"
  height="300px"
  border-radius="8px"
/>

<!-- Inline in a paragraph -->
<paragraph>
  A little logo <image src="https://sevk.io/logo.png" alt="sevk" width="20px" height="20px" /> right here.
</paragraph>

Name	Type	Description
`src`required	string	Image URL
`alt`required	string	Alt text
`width`	string
`height`	string
`border-radius`	string
`margin`	string

divider

Self-closing horizontal rule.

<divider background-color="#e5e5e5" height="1px" margin="20px 0" />

Name	Type	Description
`background-color`	string	Line color
`height`	string	Thickness
`width`	string
`margin`	string

Interactive

button

A bulletproof call-to-action. sevk emits MSO-conditional markup so Outlook renders the padding correctly.

<section text-align="center" padding="24px 0">
  <button
    href="https://example.com/start"
    background-color="#000000"
    color="#ffffff"
    padding="14px 28px"
    border-radius="8px"
    font-weight="600"
  >
    Get started
  </button>
</section>

Name	Type	Description
`href`required	string	Click destination
`background-color`	string
`color`	string
`padding`	string
`border`	string
`border-radius`	string
`font-size`	string
`font-weight`	string

Lists

<list> with <li> items. Set type="ordered" for numbered.

<list padding="0 0 0 20px" list-style-type="disc">
  <li><paragraph>First point</paragraph></li>
  <li><paragraph>Second point with <text color="#5227FF">emphasis</text></paragraph></li>
  <li><paragraph>Third point</paragraph></li>
</list>

<list type="ordered" list-style-type="decimal" padding="0 0 0 20px">
  <li><paragraph>Step one</paragraph></li>
  <li><paragraph>Step two</paragraph></li>
</list>

Name	Type	Description
`type`	string	ordered or unordered (default unordered)
`list-style-type`	string	disc, circle, decimal, lower-alpha...
`padding`	string
`margin`	string

Code

<codeblock> renders syntax-highlighted code using Prism, inlined as email-safe spans. Works in Gmail, Apple Mail, and Outlook.

<codeblock language="typescript" theme="oneDark" line-numbers="false">
import { Sevk } from 'sevk'

const sevk = new Sevk()
await sevk.emails.send({ from, to, subject, text })
</codeblock>

Name	Type	Description
`language`	string	typescript, javascript, python, go, rust, java, ruby, php, bash, json, yaml, sql, markdown, css, html...
`theme`	string	oneDark (default), and the other bundled themes
`line-numbers`	string	true or false (default false)
`font-family`	string	Override the monospace font

Blocks

The <block> tag is a template-plus-config container. See /markup/blocks for the grammar, built-ins, and how to build your own.

<block type="social-links" config='{"links":[
  {"platform":"github","href":"https://github.com/sevk","iconSrc":"https://cdn.sevk.io/icons/github.png"}
],"iconSize":"32px"}'>
  <section text-align="{%alignment ?? center%}">
    {%#each links as link%}
      <link href="{%link.href%}"><image src="{%link.iconSrc%}" width="{%iconSize%}" /></link>
    {%/each%}
  </section>
</block>

Name	Type	Description
`type`	string	Editor block identifier (optional for the renderer)
`config`	string	JSON config. Single-quote the attribute. Defaults to {} when omitted or unparsable.