600 West

Linked 

<div class="Linked ">
    <a class="pl500" href="https://sproutsocial.com">
    Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet.
</a>

</div>
 
<div class="Linked {{modifier}}">
  {{> @children}}
</div>
 
{
  "modifier": null,
  "children": [
    {
      "component": "link",
      "context": {
        "href": "https://sproutsocial.com",
        "modifier": "pl500",
        "text": "Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet."
      }
    }
  ]
}
  • Content: 
    import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

const Linked = (props) => {
    return(
        <li
            className={cx(['Linked', props.modifier])}
        >
            {props.children}
        </li>
    );
};

Linked.propTypes = {
    modifier: PropTypes.string
};

export default Linked;
  • URL: /components/raw/linked/Linked.jsx
  • Filesystem Path: components/molecules/Linked/Linked.jsx
  • Size: 343 Bytes
  • Content: 
    @import "../../Axioms";
@supports (--line-position: 0) {
    .Linked {
        --line-position: 0;
        --line-size: 100%;
        --line-color: #{get-color(neutral, 200)};
        --dot-background: #{theme-color(background)};
        --dot-border: #{get-color(neutral, 200)};
        --left: 0;
        --top: #{Space(200)};
        --size: #{Space(400)};
        background-image:
            radial-gradient(
                circle,
                var(--dot-background) 0%,
                var(--dot-background) calc(48% - #{Space(100)}),
                var(--dot-border) calc(50% - #{Space(100)}),
                var(--dot-border) 50%,
                transparent 52%
            ),
            linear-gradient(
                to right,
                transparent calc(50% - (#{Space(100)} / 2)),
                var(--line-color) calc(50% - (#{Space(100)} / 2)),
                var(--line-color) calc(50% + (#{Space(100)} / 2)),
                transparent calc(50% + (#{Space(100)} / 2))
            );
        background-repeat: no-repeat, no-repeat;
        background-position: left var(--left) top var(--top), left var(--left) top var(--line-position);
        background-size: var(--size) var(--size), var(--size) var(--line-size);
    }
    .Linked.is-active {
        // changes the color of the active dot
        --dot-background: #{theme-color(link, dark)};
        --dot-border: var(--dot-background);
    }
    .Linked:hover {
        // changes the color of the border of the dot on hover
        --dot-border: #{theme-color(link, dark)};
    }
    .Linked:first-child {
        // starts line under the dot
        --line-position: calc(var(--size) / 2);
    }
    .Linked:last-child {
        // ends line under the dot
        --line-size: calc(var(--size) / 2);
    }
    .Linked:first-child:last-child {
        // line only if there is more than one
        --line-size: 0;
    }
    .Linked--300 {
        --left: #{Space(300)};
    }
    .Linked--400 {
        --left: #{Space(400)};
    }
    .Linked--450 {
        --left: #{Space(450)};
    }
    .Linked--500 {
        --left: #{Space(500)};
    }
}
  • URL: /components/raw/linked/Linked.scss
  • Filesystem Path: components/molecules/Linked/Linked.scss
  • Size: 2.1 KB

Linked

This component creates linked items with a dot and line in between.

Multiple Linked Elements in a row

#Example usage

    <ul class="list">
        <li class="Linked">
            <a class="pl500" href=""#0>Link 1</a>
        </li>
        <li class="Linked">
            <a class="pl500" href="#0">Link 2</a>
        </li>
        <li class="Linked">
            <a class="pl500" href="#0">Link 2</a>
        </li>
    </ul>

Best Practices

  • This can be placed on any element. For the moment we are only using it on list Items.
  • Use the .Linked--300, .Linked--400, .Linked--450, or .Linked--500 to move the bullet to the right from the left side.
  • use padding or margin to create a space for the bullet.

Accessibility

The Grey used by the linked elements, Meets AA specifications, but the green doesn’t. Don’t use this element as the only way to communicate state.