1.2.1 • Published 4 years ago
linkable-title v1.2.1
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' |