SHead

<SHead> denotes the title and start of a given section.

@globalbrain/sefirot/lib/components/SHead.vue

The head title

Lorem ipsum dolor sit, amet consectetur.

Usage

<SHead> has 2 child components: <SHeadTitle> and <SHeadLead>. <SHeadTitle> is used to display the title text, and <SHeadLead> is used to display the lead text below the title.

<script setup lang="ts">
import SHead from '@globalbrain/sefirot/lib/components/SHead.vue'
import SHeadLead from '@globalbrain/sefirot/lib/components/SHeadLead.vue'
import SHeadTitle from '@globalbrain/sefirot/lib/components/SHeadTitle.vue'
</script>

<template>
  <SHead>
    <SHeadTitle>The head title</SHeadTitle>
    <SHeadLead>Lorem ipsum dolor sit, amet consectetur.</SHeadLead>
  </SHead>
</template>

<script setup lang="ts">
import SHead from '@globalbrain/sefirot/lib/components/SHead.vue'
import SHeadLead from '@globalbrain/sefirot/lib/components/SHeadLead.vue'
import SHeadTitle from '@globalbrain/sefirot/lib/components/SHeadTitle.vue'
</script>

<template>
  <SHead>
    <SHeadTitle>The head title</SHeadTitle>
    <SHeadLead>Lorem ipsum dolor sit, amet consectetur.</SHeadLead>
  </SHead>
</template>

You may also define :mode on <SHeadTitle> to change the title's appearance. The default mode is neutral.

interface Props {
  mode?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
}

interface Props {
  mode?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
}

<SHead>
  <SHeadTitle mode="danger">Dangerous title</SHeadTitle>
  <SHeadLead>Lorem ipsum dolor sit, amet consectetur.</SHeadLead>
</SHead>

<SHead>
  <SHeadTitle mode="danger">Dangerous title</SHeadTitle>
  <SHeadLead>Lorem ipsum dolor sit, amet consectetur.</SHeadLead>
</SHead>

Also, note that the <SHeadLead> component also styles <a> elements when it is passed so there is no need to style links manually.