<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Secondary Link Style<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-external">External Link Style<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link link-tertiary">Tertiary Link Style<span class="arrow"></span></a>
</li>
<li>
<button class="link-video" data-micromodal-trigger=>
Video Link Style
<span class="icon-video">
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
<path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
<path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
</svg>
</span>
</button>
<div class="iastate22-modal iastate22-modal--with-video" id="video-modal" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="video-modal-content" role="dialog" aria-modal="true" aria-labelledby="video-modal-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
<div class="iastate22-modal__media">
<div class="video-embed">
<div class="video-embed__media-wrap">
<img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
<div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
</div>
<div class="video-embed__caption">Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</div>
</div>
</div>
<div class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="video-modal-title">Video Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="link-set">
<ul>
{% for link in links %}
<li>
{% if link.variant == "link-video" or link.variant == "link-video--reverse" %}
{% include "@link-video" with link %}
{% else %}
<a href="{{link.url}}" class="link-set__link{% if link.variant %} {{link.variant}}{% endif %}">{{link.text}}{% if link.variant %}<span class="arrow"></span>{% endif %}</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{
"links": [
{
"url": "https://iastate.edu",
"text": "Secondary Link Style",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "External Link Style",
"variant": "iastate22-link-external"
},
{
"url": "https://iastate.edu",
"text": "Tertiary Link Style",
"variant": "link-tertiary"
},
{
"text": "Video Link Style",
"variant": "link-video",
"modal": {
"id": "Video-Modal-Set-Vid-Link",
"title": "Video Modal",
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
"video": {
"wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
"source": "youtube",
"title": "Your future starts now.",
"youtube_video_id": "LjOmcZkXVcU",
"vimeo_video_id": ""
}
}
}
]
}
.paragraph-widget--link-set {
margin-bottom: rem(50);
}
.link-set {
ul {
padding: 0;
li {
padding-left: 0;
margin: 0 0 rem(12) 0;
text-indent: 0;
&:before {
display: none;
}
}
}
}
.link-set__link {
color: $iastate-maroon;
font-family: $typeface-sans-serif;
font-weight: 700;
&.iastate22-link-external {
font-size: rem(18);
text-decoration: none;
line-height: (25 / 18);
&:after {
content: "";
width: rem(18);
height: rem(18);
background-image: url("data:image/svg+xml,%0A%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-jrvdubsivk-1' points='0 0 18 0 18 18 0 18'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='image'%3E%3Cmask id='mask-jrvdubsivk-2' fill='white'%3E%3Cuse xlink:href='%23path-jrvdubsivk-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='Path'%3E%3C/g%3E%3Cg id='Group' mask='url(%23mask-jrvdubsivk-2)' fill='%237C2529' fill-rule='nonzero'%3E%3Cg transform='translate(1.000000, 1.000000)' id='Path'%3E%3Cpolygon points='5 -1 5 1 1 1 1 15 15 15 15 11 17 11 17 17 -1 17 -1 -1'%3E%3C/polygon%3E%3Cpolygon points='17 -1 17 8 15 8 15 1 8 1 8 -1'%3E%3C/polygon%3E%3Cpolygon points='15.2928932 -0.707106781 16.7071068 0.707106781 6.70710678 10.7071068 5.29289322 9.29289322'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: rem(18);
display: inline-block;
position: relative;
top: rem(4);
margin-left: rem(12);
}
&:hover {
text-decoration: underline;
color: $iastate-maroon;
}
.arrow {
display: none;
}
}
&.iastate22-link-secondary,
&.link-tertiary {
margin: 0;
}
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap, although the “link-seondary” subcomponent is prefixed “iastate22-link-secondary”)
link-secondary, allowing for multiple instances of the button to be output"iastate22-link-secondary" or "link-tertiary" in the config file as an option of "variant": - the secondary or tertiary link styles will be pulled, if link is pointing to any site pointing outside of https://www.iastate.edu/, the external link icon will be added with no option needed for the "variant"<span class="arrow"></span> is required after the button textindex.scss file as @import "../components/link-set/link-set";<div class="paragraph-widget paragraph-widget--link-set">.