[design-elements-header icon="https%3A%2F%2Fassets-global.website-files.com%2F60953231b313b56665e6e317%2F6156fc30f017e450078901d1_link.svg" title="Link" description="Direct%20users%20to%20different%20pages%2C%20references%2C%20and%20valuable%20content%20within%20and%20outside%20your%20site%20with%20the%20Link%20Design%20Element.%20With%20a%20click%2C%20your%20users%20can%20navigate%20towards%20the%20resources%20that%20they%20need%20to%20succeed." /]
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
Integer sodales nunc eget erat efficitur, nec laoreet nibh pellentesque. [link title="Donec" color="info" /]
vel purus eget tortor ultricies vehicula. Curabitur facilisis libero tortor, eu ultrices nunc venenatis a. Aliquam erat volutpat. Quisque est diam, scelerisque quis ex ut, sagittis fermentum tortor. In lobortis eros diam, id pharetra libero auctor id. [link title="Morbi" color="success" icon="anchor" /]
pharetra volutpat tristique. Ut ac congue mauris. Cras vehicula convallis enim tincidunt faucibus. [link title="Class" color="warning" icon="exclamation-circle" /]
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent bibendum, nisl sed venenatis suscipit, ex nunc aliquet elit, et molestie elit justo rutrum libero. Suspendisse potenti. Vivamus facilisis posuere sem sit amet aliquam. [link title="Vestibulum" color="primary" icon="map-marker" /]
efficitur ante felis. Nulla eu ex a justo bibendum sagittis. Nullam lorem massa, sagittis at sodales vel, euismod a nibh. Fusce fermentum est at eros lacinia malesuada. [link lightbox title="Curabitur" link="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2F3yfswcfj6do-garth-pratt-min-1.jpg" color="violet" icon="picture-o" /]
et gravida massa, at cursus eros. Morbi quis libero tincidunt nisi consequat pharetra. Curabitur [link title="aliquam" color="red" icon="ion-social-youtube" /]
finibus elit, quis posuere diam maximus ut. Etiam lectus eros, elementum quis rhoncus a, consequat at libero. Nam vestibulum pretium ante, eget accumsan nunc dictum id. Curabitur turpis elit, finibus id ultrices ac, tempus sed orci.[/column]
[/row]
[/section-item]
[/section]
Link Options Demos
Different Colors
[divider style="double-dotted" /]
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
[link title="Primary%20Link" color="primary" /]
[link title="Success%20Link" color="success" /]
[link title="Danger%20Link" color="danger" /]
[link title="Info%20Link" color="info" /]
[link title="Warning%20Link" color="warning" /]
[/column]
[/row]
[/section-item]
[/section]
With Icons
[divider style="double-dotted" /]
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
[link title="Link%20With%20Icon" icon="ion-android-add" /]
[link title="Link%20With%20Icon" icon="ion-android-delete" /]
[link title="Link%20With%20Icon" icon="ion-edit" /]
[link title="Link%20With%20Icon" icon="ion-android-notifications" /]
[link title="Link%20With%20Icon" icon="ion-android-person-add" /]
[/column]
[/row]
[/section-item]
[/section]
Linking Options
[divider style="double-dotted" /]
Lightbox
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
[link lightbox title="Link%20With%20Image" link="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2F3yfswcfj6do-garth-pratt-min-1.jpg" color="border-dark" icon="ion-image" /]
[link lightbox title="Link%20With%20Youtube%20Video" link="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQPdWJeybMo8" color="red" icon="ion-social-youtube" /]
[link lightbox title="Link%20With%20Vimeo%20Video" link="https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F72316750" color="info" icon="ion-social-vimeo" /]
[link lightbox title="Link%20With%20Google%20Map" link="https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%3Fpb%3D!1m18!1m12!1m3!1d12616.999789398731!2d-122.44720946928643!3d37.760737096627345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%253A0x4a501367f076adff!2sSan%2BFrancisco%252C%2BCA%252C%2BUSA!5e0!3m2!1sen!2sua!4v1477074759345" color="primary-dark" icon="map-marker" /]
[/column]
[/row]
[/section-item]
[/section]
New Window
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
[link new-window title="Link%20With%20Image" link="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2F3yfswcfj6do-garth-pratt-min-1.jpg" color="border-dark" icon="ion-image" /]
[link new-window title="Link%20With%20Youtube%20Video" link="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQPdWJeybMo8" color="red" icon="ion-social-youtube" /]
[link new-window title="Link%20With%20Vimeo%20Video" link="https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F72316750" color="info" icon="ion-social-vimeo" /]
[link new-window title="Link%20With%20Google%20Map" link="https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%3Fpb%3D!1m18!1m12!1m3!1d12616.999789398731!2d-122.44720946928643!3d37.760737096627345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%253A0x4a501367f076adff!2sSan%2BFrancisco%252C%2BCA%252C%2BUSA!5e0!3m2!1sen!2sua!4v1477074759345" color="primary-dark" icon="map-marker" /]
[/column]
[/row]
[/section-item]
[/section]
[sp-demo-doc]
Title – required! The link text
Link – the actual link address
Linking options – there you can choose how to open your link:
- Default – by default link will be opened in the same window
- LightBox – your Link will be opened in the lightbox
- New window – your link will be opened in the new tab
- Dialog – your Link will be opened in the dialog window
Color – defined colors for buttons like: primary, info, success, warning, danger. All colors available at
ShortPoint Colors page
Icon – display icon next to the link. All icons available at
ShortPoint Icons page[/sp-demo-doc]