Header

Component is used to display a header at the top of the page.

---
import { Button, Header, Heading, Row } from 'fulldev-ui'
---

<Header compact structure="spread">
  <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>

Props

Prop	Type	Default
structure	spread \| row \| column	spread
position	relative \| sticky \| fixed \| absolute	relative
frame	fill \| panel	fill
size	sm \| md \| lg	-
compact	attribute	true
align	start \| center \| end	center
variant	ghost \| subtle \| soft \| surface \| outline	subtle
theme	string	-
as	HTMLTag	header
HTML Attributes	Polymorphic<as>	-

Examples

`frame`

---
import { Button, Header, Heading, Row } from 'fulldev-ui'
---

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

`size`

The size prop cascades: it is inherited from the parent and it is applied to all children.

---
import { Button, Header, Heading, Row } from 'fulldev-ui'
---

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

`variant`

Sets the color variant used for this component and all its children.

---
import { Button, Header, Heading, Row } from 'fulldev-ui'
---

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

`structure`

Applies all styles & props of the chosen Structure component to this component.

`spread`

Structures children in a row with space between them and wrapping.

`row`

Structures children in a horizontal row.

`column`

Structures children in a vertical stack and sets dynamic margins between them.

For example, the margin between a heading and a paragraph is smaller than the margin between a paragraph an image.