StA web component demo

HTML

<sta-navbox image="https://www.st-andrews.ac.uk/dpl/1.26.0/assets/docs/images/placeholders/750x500.png" alt-text="asd" title="This is a title for a navbox" url="https://www.st-andrews.ac.uk/" large="">
        <div slot="paragraph">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </sta-navbox>
    <sta-navbox image="https://www.st-andrews.ac.uk/dpl/1.26.0/assets/docs/images/placeholders/750x500.png" alt-text="asd" title="This is a title for a navbox 2" url="https://www.st-andrews.ac.uk/" large="">
        <div slot="paragraph">Vivamus mattis enim sed massa consequat, a bibendum tellus feugiat.</div>
    </sta-navbox>
    <sta-navbox image="https://www.st-andrews.ac.uk/dpl/1.26.0/assets/docs/images/placeholders/750x500.png" alt-text="asd" title="This is a title for a navbox 3" url="https://www.st-andrews.ac.uk/" large="">
        <div slot="paragraph">Nulla malesuada semper semper. Sed aliquam dictum nibh. Pellentesque commodo tempor purus, eget malesuada urna tincidunt vel. Donec consectetur eros at purus vulputate, nec tristique turpis blandit.</div>
    </sta-navbox>

JavaScript

const navbox = document.createElement('template');
navbox.innerHTML = `
    <style>
    * {
        box-sizing: border-box;
        font-family: "PT Sans",Helvetica,Arial,sans-serif;
        font-size: 100%;
        line-height: 1.42857;
        color: #202024;
    }
    .col-sm-4 {
        width: 33.33333%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .navbox:not(.big-target-click-zone) {
        display: block;
        margin-bottom: 0;
        position: relative;
    }
    .navbox:not(.big-target-click-zone) img {
        height: auto;
        max-width: 100%;
    }
    img {
        vertical-align: middle;
        border: 0;
    }
    .navbox:not(.big-target-click-zone) .navbox__image + .navbox__title {
        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    }
    .navbox:not(.big-target-click-zone) .navbox__title:first-child {
        text-shadow: none !important;
    }
    .navbox:not(.big-target-click-zone) .navbox__title {
        font-size: 1.25em;
    }
    .navbox:not(.big-target-click-zone) .navbox__title {
        color: white;
        font-size: 1.2em;
        font-weight: bold;
        text-decoration: none;
        background: #005586;
        
    }
    .navbox:not(.big-target-click-zone) .navbox__title a {
        color: white;
        text-decoration: none;
    }
    a {
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 0.15em;
        outline: 0;
        outline-offset: 0;
    }
    a {
        background-color: transparent;
    }
    ::before, ::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .navbox:not(.big-target-click-zone) .navbox__title a span::before {
        font-size: 1.2em;
        display: inline-block;
        position:...