Header

Prop	Type	Default
structure	'spread' \| 'row' \| 'column'	spread
position	'relative' \| 'sticky' \| 'fixed' \| 'absolute'	-
variant	'ghost' \| 'base' \| 'subtle' \| 'soft' \| 'surface' \| 'outline'	base
size	'sm' \| 'md' \| 'lg'	-
frame	'fill' \| 'panel'	fill
align	'start' \| 'center' \| 'end'	center
space	'none' \| 'auto'	auto
compact	boolean	true
logo	string	-
heading	string	-
links	any[]	-
buttons	any[]	-
drawer	any[]	-
search	any	-
as	HTMLTag	header
HTML Attributes	Polymorphic<header>	-

Examples

---
import Button from 'fulldev-ui/components/Button.astro'
import Header from 'fulldev-ui/components/Header.astro'
import Heading from 'fulldev-ui/components/Heading.astro'
import Row from 'fulldev-ui/components/Row.astro'
---

<Header
  heading={[{ as: 'a', href: '/', text: 'Fulldev UI' }]}
  buttons={[
    {
      variant: 'ghost',
      title: 'X / Twitter',
      icon: 'brand-x',
      href: 'https://x.com/silveltm',
      target: '_blank',
      contrast: true,
    },
  ]}
  compact
  frame="fill"
  position="relative"
  compact
/>

<Header compact frame="fill" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

<Header compact frame="panel" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

---
import Button from 'fulldev-ui/components/Button.astro'
import Header from 'fulldev-ui/components/Header.astro'
import Heading from 'fulldev-ui/components/Heading.astro'
import Row from 'fulldev-ui/components/Row.astro'
---

<Header size="sm" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

<Header size="md" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

<Header size="lg" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

---
import Button from 'fulldev-ui/components/Button.astro'
import Header from 'fulldev-ui/components/Header.astro'
import Heading from 'fulldev-ui/components/Heading.astro'
import Row from 'fulldev-ui/components/Row.astro'
---

<Header variant="ghost" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

<Header variant="subtle" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

<Header variant="soft" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

<Header variant="surface" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

<Header variant="outline" position="relative">
  <Heading as="a" href="/"> Fulldev UI </Heading>
  <Row>
    <Button
      variant="ghost"
      title="X / Twitter"
      icon="brand-x"
      href="https://x.com/silveltm"
      target="_blank"
      contrast
    />
    <Button html="Docs" href="/overview/introduction/" contrast />
  </Row>
</Header>

Overview

Structure

Segment

Typography

Base

Header

Examples