@ou-imdt/css
Version:
The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.
97 lines (60 loc) • 5.49 kB
Markdown
# a (links)
The anchor element creates a hyperlink to web pages, files, email addresses, locations in the same
page, or anything else a URL can address including same origin downloads.
## Example
<div class="card">
Normal linke: <a href="https://www.mozilla.com">Mozilla</a>
</div>
<details class="compact">
<summary>HTML</summary>
```html
Normal linke: <a href="https://www.mozilla.com">Mozilla</a>
```
</details>
<div class="card">
<a download="text.svg"
href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-350%20-250%20700%20500%22%3E%0A%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%20media%3D%22screen%22%3E%0A%20%20%20%20%20%20%20%20svg%20%7B%20background%3A%23fff%3B%20%7D%0A%20%20%20%20%20%20%20%20.face%20%7B%20stroke%3A%23000%3B%20stroke-width%3A20px%3B%20stroke-linecap%3Around%20%7D%0A%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%20%20%3Ccircle%20r%3D%22200%22%20class%3D%22face%22%20fill%3D%22red%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill%3D%22none%22%20class%3D%22face%22%20transform%3D%22translate(-396%2C-230)%22%20d%3D%22M487%2C282c-15%2C36-51%2C62-92%2C62%20c-41%2C0-77-25-92-61%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22-60%22%20cy%3D%22-50%22%20r%3D%2220%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22-50%22%20r%3D%2220%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E">
Dowload SVG
</a>
</div>
<details class="compact">
<summary>HTML</summary>
```html
<a download="text.svg"
href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-350%20-250%20700%20500%22%3E%0A%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%20media%3D%22screen%22%3E%0A%20%20%20%20%20%20%20%20svg%20%7B%20background%3A%23fff%3B%20%7D%0A%20%20%20%20%20%20%20%20.face%20%7B%20stroke%3A%23000%3B%20stroke-width%3A20px%3B%20stroke-linecap%3Around%20%7D%0A%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%20%20%3Ccircle%20r%3D%22200%22%20class%3D%22face%22%20fill%3D%22red%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill%3D%22none%22%20class%3D%22face%22%20transform%3D%22translate(-396%2C-230)%22%20d%3D%22M487%2C282c-15%2C36-51%2C62-92%2C62%20c-41%2C0-77-25-92-61%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22-60%22%20cy%3D%22-50%22%20r%3D%2220%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22-50%22%20r%3D%2220%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E">
Dowload SVG
</a>
```
</details>
<div class="card">
<a href="#Section_further_down">Jump to the heading below</a>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
<strong id="Section_further_down">Section further down</strong>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
</div>
<details class="compact">
<summary>HTML</summary>
```html
<a href="#Section_further_down">Jump to the heading below</a>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
<strong id="Section_further_down">Section further down</strong>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab aut error vitae, nostrum commodi sunt fuga amet consequuntur, quos labore asperiores minus voluptatem voluptas dignissimos dolorum iusto quia praesentium eum.
```
</details>
## .button
Adding the class and role or button to a link will style it as a button; using an actual button is always preferred.
<div class="card">
<a href="#" role="button" class="button">Link as a button</a>
</div>
<details class="compact">
<summary>HTML</summary>
```html
<a href="#" role="button" class="button">Link as a button</a>
```
</details>