1.4.0 • Public • Published

    Link List component

    npm version


    The Links List component is a robust list group that can be used in a variety of grid layouts.


    The Links List can have a title <h3 class="vf-links__heading">Example Title</h3>.

    In each list item you can have:

    A link <a class="vf-links__link" href="">Example Link</a>.

    Except for a Links List that is using the the design variant of vf-links__list--easy you can also use:

    It can make use of the vf-badge component <span class="vf-badge">Example Tag</span>.

    It can include meta information <p class="vf-links__meta">Example Meta</p>.

    Contextual Based Link Lists

    "On this page"

    If you want to provide a set of links that will anchor to sections on the page you should use:

    note: You will need to add a corresponding id to the section you are linking to for the anchor to work.

    Link List
    <div class="vf-links vf-links__list--easy">
      <h3 class="vf-links__heading">On this page</h3>
      <ul class="vf-links__list | vf-list">
        <li class="vf-list__item">
          <a class="vf-list__link" href="#Anchor-Text">
            Anchor Text
            <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
    Linked Section In Page
    <section class="vf-component" id="Anchor-Text">

    "In this section"

    If you want to include quick links as part of a section of content you can use:

    Link List
    <div class="vf-links vf-links--tight vf-links__list--s vf-links__list--very-easy">
      <h3 class="vf-links__heading">In this section</h3>
      <ul class="vf-links__list vf-links__list--secondary | vf-list">
        <li class="vf-list__item">
          <a class="vf-list__link" href="#Anchor-Text">
            Anchor Text
    Linked Text In Section
    <section class="vf-component">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolore eveniet sed totam deleniti, ipsum dolorum cupiditate, aut error quae beatae nemo esse pariatur repellendus illo dicta doloribus alias ipsa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, ut aut eveniet consectetur rem. Sapiente quis optio cupiditate molestias debitis quisquam ab in. Voluptates, expedita modi aliquam, sint tempore magnam.</p>
      <p id="Anchor-Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quo magnam accusamus vel porro, ullam tempora illo atque vitae voluptatum ratione temporibus, est, itaque quasi eum cupiditate mollitia adipisci. Suscipit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur fuga eveniet ducimus, dolorem sit itaque sequi nisi praesentium consequatur, temporibus tempore rem illo laboriosam libero repudiandae neque labore suscipit expedita.</p>


    This component is distributed with npm. After installing npm, you can install the vf-link-list with this command.

    $ yarn add --dev @visual-framework/vf-link-list


    The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

    @import "@visual-framework/vf-link-list/index.scss";

    Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter



    npm i @visual-framework/vf-link-list

    DownloadsWeekly Downloads





    Apache 2.0

    Unpacked Size

    46.7 kB

    Total Files


    Last publish


    • khawkins98
    • sturobsonembl