linkable-title

Usage

Linkable-title

<linkable-title> element is meant to be used like a heading element. You need to specify an id attribute for it to know what to link to.

Default usage

<linkable-title tag="h1" id="heading-1">I'm a heading and I can be linked</linkable-title>

Custom icon

<linkable-title tag="h2" id="heading-2">
  <div slot="icon">
    <!-- go nuts here -->
    <small>link</small>
  </div>
  I'm linkable with custom icon (not a pretty one)
</linkable-title>

No icon

<linkable-title tag="h2" id="heading-3" no-icon>
  I'm another heading with no icon
</linkable-title>

You can use CSS variables to change the icon spacing

/* defaults */
linkable-title {
  --icon-width: 2rem;
  --icon-gap: 0.4rem;
}

Installation

linkable-title is available in npm and CDN

CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/linkable-title/dist/linkable-title/linkable-title.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/linkable-title/dist/linkable-title/linkable-title.js"></script>

add the script tags in your html and the component will get lazy loaded when it's used on the page.

Framework integration

Please refer to the StencilJS docs for instructions on how to integrate with your favourite JavaScript framework.

Properties

Property	Attribute	Description	Type	Default
noIcon	no-icon	If there's an icon to be displayed on hover/focus	boolean	false
tag	tag	HTML tag to be used for the content	string	'h4'