NoteHeader

A header for note layouts with a prominent linked URL.

Props

A NoteHeader component has the following properties:

PropRequiredDescription
valueyesType NoteMeta.
classnoAdditional Tailwind classes for the header element.

Examples

<script lang="ts">
	import { NoteHeader } from '$lib/components/index.js';

	const note = {
		title: 'SvelteKit deployment best practices',
		description:
			'For SvelteKit on Railway, set env vars, add health checks, and use security headers to ensure reliable, secure, and smooth production deployments.',
		publishedDate: '2025-05-18',
		link: 'https://blog.example.com/articles/comprehensive-guide-to-sveltekit-deployment-strategies-best-practices-performance-optimization-security-considerations-monitoring-and-troubleshooting-techniques-for-production-environments',
		_meta: {
			filePath: 'sveltekit-deployment-tips/+page.md',
			fileName: '+page.md',
			directory: 'sveltekit-deployment-tips',
			extension: 'md',
			path: 'sveltekit-deployment-tips/+page'
		}
	};
</script>

<NoteHeader value={note} />