Skip to content

Latest commit

 

History

History
69 lines (47 loc) · 2.91 KB

readme.md

File metadata and controls

69 lines (47 loc) · 2.91 KB
Raw

Built With Stencil

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'