External link and PDF icon default

[kevindherman]

Source The source of the issue #Marin County

Is your feature request related to a problem? Please describe. Better accessibility for external linking and links to PDFs

What feature would you like to improve Add external link icon to external links as a default. Add PDF icon to hyperlinks to PDFs as a default.

Describe the solution you'd like Add external link icon to external links.

[curtismchale]

@kevindherman what page specifically can I find an example of this on?

[kevindherman]

@curtismchale I created this page with a PDF link example and an external link that opens a new tab example:

https://presentation-ca.proudcity.com/example-link-page/

This site (not ours) has the pdf and external link icon behavior that I think we should replicate. https://www.marincounty.org/

Is this what you're looking for?

[lukefretwell]

@kevindherman I played with this and suggest we add other file types that are not html since government tends to link to these and might as well add while we're doing.

@curtismchale we should think about this because there are some cases where this might be visually clunky. The instance where I think this would be most likely is with the Bootstrap icon/image cards as well as the social media icon links in contact.

Since we have the target="blank" code we can use a.external if we can dynamically generally the main URL into the CSS (which I assume we can't).

Example code:

/* External links */

/* Link */
a[target="_blank"]:after {
    content: "";
    padding-right: var(--size-8);
    background-image: url(/assets/font-awesome/svgs/solid/up-right-from-square.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

/* Doc */
a[href$=".doc"], a[href$=".docx"] {
    background-image: url(/assets/font-awesome/svgs/solid/file-word.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: var(--size-7);
}

/* Powerpoint */
a[href$=".ppt"], a[href$=".pptx"] {
    background-image: url(/assets/font-awesome/svgs/solid/file-powerpoint.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: var(--size-7);
}

/* Excel */
a[href$=".xls"], a[href$=".xlsx"] {
    background-image: url(/assets/font-awesome/svgs/solid/file-excel.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: var(--size-7);
}

/* PDF */
a[href$=".pdf"] {
    background-image: url(/assets/font-awesome/svgs/solid/file-pdf.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: var(--size-7);
}

/* MP3 */
a[href$=".mp3"] {
    background-image: url(/assets/font-awesome/svgs/solid/file-audio.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: var(--size-7);
}

/* MP4 */
a[href$=".mp4"] {
    background-image: url(/assets/font-awesome/svgs/solid/file-video.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: var(--size-7);
}

/* Image */
a[href$=".png"], a[href$=".jpg"] {
    background-image: url(/assets/font-awesome/svgs/solid/file-image.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: var(--size-7);
}

[kevindherman]

@lukefretwell good call.