Components

Logo component

Size constrained by its containing element

<comp.Logo />

Search input

Form element for searching the deno domain with google search

<comp.SearchInput />

External link callout

Decorator for external links

<comp.ExternalLink href="https://deno.com">
  deno.com
</comp.ExternalLink>

deno.com

Hero

A hero section for the top of a page

<comp.Hero bgImage="deno-looking-up.svg">
    <h1>Title text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</comp.Hero>

Banner

A banner style component for highlighting important information with different colors based on their type prop

<comp.Banner type="runtime">
<p class="text-lg"><strong>Strong Text</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod</p>
</comp.Banner>

Heading

Headings with a coloured underline based on the type prop. Heading level set with level prop

<comp.Heading level="2" type="runtime">A secondary heading</comp.Heading>
<comp.Heading level="3" type="runtime">A secondary heading</comp.Heading>
<comp.Heading level="3" type="deploy">A secondary heading</comp.Heading>
<comp.Heading level="3" type="purple">A secondary heading</comp.Heading>

A secondary heading

A tertiary heading

A tertiary heading

A tertiary heading

Theme toggle

Toggle control for flipping the theme

<comp.ThemeToggle />

Toggle Theme

CTA

Call to action button with different colors based on their type prop

<comp.CTA href="https://deno.com" type="runtime">Explore Deno</comp.CTA>

<comp.CTA href="https://deno.com" type="jsr">See all packages on JSR</comp.CTA>

<comp.CTA href="https://deno.com" type="deploy">Get started</comp.CTA>

Explore Deno
See all packages on JSR
Get started

Columns

A component for displaying content in equal width columns

<comp.Columns>
    <div>
        <h4 class="text-lg font-semibold mb-1">Column 1</h4>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="homepage-link deploy-link" href="/deploy/kv/manual/">KV docs</a>
    </div>
    <div>
        <h4 class="text-lg font-semibold mb-1">Column 2</h4>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="homepage-link deploy-link" href="/deploy/kv/manual/cron">Cron docs</a>
    </div>
    <div>
        <h4 class="text-lg font-semibold mb-1">Column 3</h4>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="homepage-link deploy-link" href="/deploy/kv/manual/queue_overview/">Queues docs</a>
    </div>
</comp.Columns>

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

KV docs

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Cron docs

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Queues docs