ContextQMD
Back to Denoland

Components

styleguide/components.mdx

latest6.4 KB
Original Source

Search input

Form element for searching the deno domain with google search

tsx
<comp.SearchInput />

<comp.SearchInput />

Hero

A hero section for the top of a page

tsx
<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>

<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>

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

tsx

<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>

<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

tsx
<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>

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

Theme toggle

Toggle control for flipping the theme

tsx
<comp.ThemeToggle />

<comp.ThemeToggle />

CTA

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

tsx
<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>

<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>

Deploy on Deploy

Call to action button with the Deno Deploy logo. Should be used with additional copy.

tsx
<comp.DeployCTA />

Deploy your application to the edge: <comp.DeployCTA />

Admonition

A box to highlight information. Must be of type

  • "caution"
  • "tip"
  • "info"
tsx
<comp.Admonition type="info">
  <strong>This is an info admonition</strong>.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</comp.Admonition>

<comp.Admonition type="info"> <strong>This is an info admonition</strong>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </comp.Admonition>

<comp.Admonition type="caution"> <strong>This is a caution admonition</strong>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </comp.Admonition>

<comp.Admonition type="tip"> <strong>This is a tip admonition</strong>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </comp.Admonition>

Columns

A component for displaying content in equal width columns

tsx
<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/classic/queues/">Queues docs</a>
    </div>
</comp.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/classic/queues/">Queues docs</a> </div> </comp.Columns>