Nuclear Powered Mushroom

    @fylgja/stretched-link

    1.1.0 • Public • Published

    Fylgja - Stretched-link

    NPM version license

    Make any component fully clickable via a nested link.

    Installation

    npm install @fylgja/stretched-link

    Then include the component in to your code via;

    @use "@fylgja/stretched-link";
    // Or via PostCSS import
    @import "@fylgja/stretched-link";

    How to use

    To use the stretched-link make sure you component is relative positioned, like a the @fylgja/card.

    This sample is made with the card component with a nested link and to make the card completely clickable,

    we also added the stretched-link on the nested link.

    <div class="card">
        <img src=".." class="card-media">
        <div class="card-content">
            <p>..</p>
            <a href="#" class="stretched-link">Read more about this cool link</a>
        </div>
    </div>

    Since the .card class has the style position: relative;

    The card becomes clickable with the href from the nested link.

    Why use this

    Why do this, you might ask, well for accessibility.

    If you use a link on the card, the complete content becomes part of the link description,

    that causes a bad description for the link, instead the link should only describe where the link will go to.

    Example:

    <!-- Bad accessibility but clickable completely -->
    <a href="#" class="card">
        <img src=".." class="card-media">
        <div class="card-content">
            <p>..</p>
        </div>
    </a>
    
    <!-- Good accessibility but only clickable on the link -->
    <div class="card">
        <img src=".." class="card-media">
        <div class="card-content">
            <p>..</p>
            <a href="#">Read more about this cool link</a>
        </div>
    </div>
    
    <!-- Both accessible and completely clickable -->
    <div class="card">
        <img src=".." class="card-media">
        <div class="card-content">
            <p>..</p>
            <a href="#" class="stretched-link">Read more about this cool link</a>
        </div>
    </div>

    Install

    npm i @fylgja/stretched-link

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    38

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    4.33 kB

    Total Files

    9

    Last publish

    Collaborators

    • grimlink