Verndale UI Components

C-CRD-2 Link List Card: Left Icon 

<ul>
    <li>
        <a class="link-list link-list--left link-list--small" href="#" tabindex="0">
            <span>Explore experimental learning</span>
            <svg viewBox="0 0 10 10" class="link-list__arrow">
                <use xlink:href="#chevron-left" />
            </svg>
        </a>
    </li>
    <li>
        <a class="link-list link-list--left link-list--small" href="#" tabindex="0">
            <span>Explore experimental learning</span>
            <svg viewBox="0 0 10 10" class="link-list__arrow">
                <use xlink:href="#chevron-left" />
            </svg>
        </a>
    </li>
    <li>
        <a class="link-list link-list--left link-list--small" href="#" tabindex="0">
            <span>Explore experimental learning</span>
            <svg viewBox="0 0 10 10" class="link-list__arrow">
                <use xlink:href="#chevron-left" />
            </svg>
        </a>
    </li>
</ul>
 
<ul>
{{#json links}}
  {{#each this}}
    <li>
      <a class="link-list link-list--{{iconPosition}} link-list--{{size}}" href="#" tabindex="0">
      <span>{{label}}</span>
      {{> svg name=icon viewBox="0 0 10 10" className="link-list__arrow"}}
      </a>
    </li>
  {{/each}}
{{/json}}
</ul>
 
{
  "links": [
    {
      "label": "Explore experimental learning",
      "icon": "chevron-left",
      "iconPosition": "left",
      "size": "small"
    },
    {
      "label": "Explore experimental learning",
      "icon": "chevron-left",
      "iconPosition": "left",
      "size": "small"
    },
    {
      "label": "Explore experimental learning",
      "icon": "chevron-left",
      "iconPosition": "left",
      "size": "small"
    }
  ]
}
  • Content: 
    @import "../theme", "variables";

.link-list {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: $primary-color;
  display: inline-flex;
  font-size: 14px;
  padding: 0;
  text-align: left;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.link-list__arrow {
  height: 15px;
  width: 15px;
  transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  fill: $primary-color;
}

.link-list--right {
  .link-list__arrow {
    margin-left: 0.25rem;
  }

  &:hover {
    .link-list__arrow {
      transform: translateX(0.3125rem);
    }
  }
}

.link-list--left {
  span {
    order: 2;
  }

  &:hover {
    .link-list__arrow {
      transform: translateX(-0.3125rem);
    }
  }
}

.link-list--small {
  font-size: 14px;
}

.link-list--large {
  font-size: 16px;
}
  • URL: /components/raw/c-crd-2-link-list-card/_styles.scss
  • Filesystem Path: src/components/C-CRD-2-link-list-card/_styles.scss
  • Size: 806 Bytes

Link List

This component create a link list to be displayed as a card in a row.

Usage

Add the front-end-copmonent library to your project

yarn add @verndale/front-end-components

Import the style to your main style file in your project

@import "../../node_modules/@verndale/front-end-components/lib/link-list/styles";

Styling

The component will already have a default style/theme set, so it will work out of the box. The link list has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.

Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss

$link-color

You always need to set your overrides before the import of you component - for example:

$link-color: #06847b;

@import "../../node_modules/@verndale/front-end-components/lib/link-list/styles";