Pinecone

Link: External (Inverse) 

<div class="spacer"></div>
<h1>Stand Alone Links</h1>

<h2><a class="link--inverse" rel="external" href="https://example.com/inverse">Example Header 2</a></h2>
<a class="link--inverse" rel="external" href="https://example.com/inverse">Link</a>

<h1>Inline Links</h1>
<p>
    <a class="link--inverse" rel="external" href="https://example.com/inverse">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Fusce viverra
    sollicitudin ante nec pellentesque. Nullam id lectus tristique felis fermentum
    sagittis. Nam in tincidunt diam, <a class="link--inverse" rel="external" href="https://example.com/inverse">non egestas</a> velit. Fusce aliquet sapien eu
    lacus placerat porta. Proin rutrum risus bibendum, tincidunt sapien vel, congue
    diam. Nulla nibh metus, dictum ac faucibus cursus, convallis quis lacus. Integer
    quis est viverra, luctus enim ac, <a class="link--inverse" rel="external" href="https://example.com/inverse">dictum nisi</a>.
</p>
<ul>
    <li><a class="link--inverse" rel="external" href="https://example.com/inverse">This whole item is a link.</a></li>
    <li><a class="link--inverse" rel="external" href="https://example.com/inverse">This is</a> a list item with a link.</li>
    <li>This is a <a class="link--inverse" rel="external" href="https://example.com/inverse">list item</a> with a link.</li>
    <li>This is a list item <a class="link--inverse" rel="external" href="https://example.com/inverse">with a link</a>.</li>
</ul>
 
{% if not standAlone %}<div class="spacer"></div>{% endif %}
<h1>Stand Alone Links</h1>

<h2><a{% if className %} class="{{ className }}"{% endif %}{% if rel %} rel="{{ rel }}"{% endif %} href="{{ href }}">Example Header 2</a></h2>
<a{% if className %} class="{{ className }}"{% endif %}{% if rel %} rel="{{ rel }}"{% endif %} href="{{ href }}">{{ label }}</a>

<h1>Inline Links</h1>
<p>
  <a{% if className %} class="{{ className }}"{% endif %}{% if rel %} rel="{{ rel }}"{% endif %} href="{{ href }}">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Fusce viverra
  sollicitudin ante nec pellentesque. Nullam id lectus tristique felis fermentum
  sagittis. Nam in tincidunt diam, <a{% if className %} class="{{ className }}"{% endif %}{% if rel %} rel="{{ rel }}"{% endif %} href="{{ href }}">non egestas</a> velit. Fusce aliquet sapien eu
  lacus placerat porta. Proin rutrum risus bibendum, tincidunt sapien vel, congue
  diam. Nulla nibh metus, dictum ac faucibus cursus, convallis quis lacus. Integer
  quis est viverra, luctus enim ac, <a{% if className %} class="{{ className }}"{% endif %}{% if rel %} rel="{{ rel }}"{% endif %} href="{{ href }}">dictum nisi</a>.
</p>
<ul>
  <li><a{% if className %} class="{{ className }}"{% endif %}{% if rel %} rel="{{ rel }}"{% endif %} href="{{ href }}">This whole item is a link.</a></li>
  <li><a{% if className %} class="{{ className }}"{% endif %}{% if rel %} rel="{{ rel }}"{% endif %} href="{{ href }}">This is</a> a list item with a link.</li>
  <li>This is a <a{% if className %} class="{{ className }}"{% endif %}{% if rel %} rel="{{ rel }}"{% endif %} href="{{ href }}">list item</a> with a link.</li>
  <li>This is a list item <a{% if className %} class="{{ className }}"{% endif %}{% if rel %} rel="{{ rel }}"{% endif %} href="{{ href }}">with a link</a>.</li>
</ul>
 
{
  "href": "https://example.com/inverse",
  "label": "Link",
  "className": "link--inverse",
  "rel": "external",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.