Page Structure

A marketing page should have a header, a footer, and a main content area. For the header and footer, you can use the following components.

  • <Header>
  • <Footer>

Properties

Name
Default
Description
name
"HYVOR"
The main name, usually "HYVOR".
subName
The sub name of the product. Ex: "Design"
logo
URL/path to the logo image.
darkToggle
true
Whether to show the dark mode toggle button.

Slots

Name
Description
center
The content in the center of the header. Usually, the navigation links like "Docs", "Pricing", etc. You can also use Dropdowns here.
end
The content in the end of the header. Usually, the login/signup buttons.

Mobile Navigation

On mobile and tablets (<=992px), content in both center and end slots will be hidden, and a hamburger menu will be shown instead. The hamburger menu will open a dropdown with the content of both slots.

Example

<script>
    import Header from "@hyvor/design/marketing/Header.svelte";
    import Button from "@hyvor/design/Button.svelte";

    import logo from '../img/logo.svg';
</script>

<Header
    logo={logo}
    subName="Talk"
>

    <div slot="center">
        <Button as="a" href="/docs" color="invisible">
            Docs
        </Button>
        <Button as="a" href="/pricing" color="invisible">
            Pricing
        </Button>
    </div>

    <div slot="end">
        <Button as="a" href="/login" color="invisible">
            Login
        </Button>
        <Button as="a" href="/signup">
            Signup
        </Button>
    </div>

</Header>

Properties

Name
Default
Description
email
null
The email address to show in the footer.
social
null
An object with social media links. The keys should be the names of the social media, and the values should be the URLs. The accepted keys are
  • x
  • discord
  • github
  • youtube
  • linkedin

Slots

Name
Description
center
The content in the center of the footer. Usually, the navigation links like "Contact Us", "Pricing", etc.

Example

The following example shows how to use the Footer and FooterLinkList components to create a footer with two columns.

<Footer
    email="foss@hyvor.com"
    social={{
        x: 'https://twitter.com'
    }}
>

    <div slot="center">

        <div style="display:flex">
            <FooterLinkList title="Product">
                <a href="pricing" target="_blank">Pricing</a>
                <a href="docs" target="_blank">Docs</a>
                <a href="customers" target="_blank">Customers</a>
            </FooterLinkList>

            <FooterLinkList title="HYVOR">
                <a href="https://hyvor.com" target="_blank">hyvor.com</a>
            </FooterLinkList>
        </div>

    </div>

</Footer>
Table of Contents