@financial-times/o-typography
Advanced tools
Comparing version 7.3.0 to 7.3.1
# Changelog | ||
### [7.3.1](https://www.github.com/Financial-Times/origami/compare/o-typography-v7.3.0...o-typography-v7.3.1) (2022-02-16) | ||
### Bug Fixes | ||
* remove icon for external links ([da7ea84](https://www.github.com/Financial-Times/origami/commit/da7ea8441f16db163e4459183d263cefea40e6b6)) | ||
## [7.3.0](https://www.github.com/Financial-Times/origami/compare/o-typography-v7.2.2...o-typography-v7.3.0) (2022-02-09) | ||
@@ -4,0 +11,0 @@ |
{ | ||
"name": "@financial-times/o-typography", | ||
"version": "7.3.0", | ||
"version": "7.3.1", | ||
"description": "Typographical styles for FT branded sites. Including typographical fundamentals such as font scales, vertical rhythm, and font fallbacks; plus styles for UI including links, headings, and titles. Other components build on o-typography to provide for more specific usecases.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -59,10 +59,9 @@ # o-typography | ||
<a class="o-typography-link" href="#" >Some link.</a> | ||
<a class="o-typography-link o-typography-link--external" href="#" >Some external link.</a> | ||
<!-- etc. --> | ||
``` | ||
An external link _may_ open in a new window/tab with `target="_blank"` but we recommend against this for most cases as it may disorientate users (see the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG20-TECHS/G200.html) for advice on when it may be appropriate to open in a new window/tab). Use the `rel="noreferrer noopener"` attribute with `target="_blank"` to avoid [exploitation of the `window.opener` API](https://mathiasbynens.github.io/rel-noopener/). | ||
A link _may_ open in a new window/tab with `target="_blank"` but we recommend against this for most cases as it may disorientate users (see the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG20-TECHS/G200.html) for advice on when it may be appropriate to open in a new window/tab). Use the `rel="noreferrer noopener"` attribute with `target="_blank"` to avoid [exploitation of the `window.opener` API](https://mathiasbynens.github.io/rel-noopener/). | ||
```html | ||
<a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html" rel="noreferrer noopener" target="_blank" class="o-typography-link o-typography-link--external">Some external link (opens a new window/tab).</a> | ||
<a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html" rel="noreferrer noopener" target="_blank" class="o-typography-link">Some external link.</a> | ||
``` | ||
@@ -249,10 +248,2 @@ | ||
Set the `$external` argument to to indicate the link leads to a different website with an icon. | ||
```scss | ||
.my-external-link { | ||
@include oTypographyLink($external: true); | ||
} | ||
``` | ||
To create a custom link style set the `$theme` argument. Where `$theme` is a map of configuration including: | ||
@@ -259,0 +250,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
118372
527