---
name: Link
route: /components/eiu/link
menu: EIU
edit: false
---

import { Playground } from 'docz'
import placeholderImg from '../../../common/static/images/image/image-placeholder.svg'
import testImg from '../../static/images/logo/EIU-logo--horizontal.svg'
import Link from './link'

# Link
**SUBCATEGORY:** Navigation

<hr />

## Link
### Description
For providing users with a link to a new location.

**The component allows for different content within the link: simple text, headings and other markup.**

**The default state (set with prop `type`) provides styles and link pseudo-states.**

<Playground>
  <code>
    <Link href="http://viewswire.eiu.com/">Link with simple text</Link>
  </code>
</Playground>

**With a heading**

<Playground>
  <code>
    <Link href="http://viewswire.eiu.com/"><h5>Link with heading</h5></Link>
  </code>
</Playground>

**With `<span>` markup**

<Playground>
  <code>
    <Link href="http://viewswire.eiu.com/" type="default">
      <span style={{border: "0.0625rem solid #333", margin: '-1em', padding: '1em'}}>
        <img style={{height: '6.75rem', margin: '0 0 1rem 0', width: '12rem'}} src={placeholderImg} alt="clickable image" />
        <p>Example text</p>
      </span>
    </Link>
  </code>
</Playground>

<hr />

## Link (custom)
### Description
For providing users with a link to a new location.

**The custom state (set with prop `type`) provides a focus pseudo-state only. Hover, active and visited states are not explicity defined, and will inherit browser behaviours.**

<Playground>
  <code>
    <Link href="http://viewswire.eiu.com/" type="custom"><img style={{height: 'auto', width :'12rem'}} src={testImg} alt="Placeholder image" /></Link>
  </code>
</Playground>

**With `<section>` markup**

<Playground>
  <code>
    <Link href="http://viewswire.eiu.com/" type="custom"><section style={{border: "1px solid #333", margin: '-2em', padding: '2em'}}><h5>Link with heading</h5><p>Link paragraph content</p></section></Link>
  </code>
</Playground>