Links

Links navigate to other pages or additional information.

Structure of the default link

  <a href="#">Click here</a>

Examples and usage

Default links

The default link has no special class.

  <a href="#">Click here</a>

Default links with icons

Use icons to identify where links go or what they do. Users can more quickly absorb a visual icon than text.

• For adding or creating items, we use the link preceeded by the plus icon .
• For opening items, we use the link preceeded by the external link icon .

In some cases, the link can contain only an icon, for example, in the table where there is not enough space.

Single links with icons

  <a href=""><i class="fa fa-plus-circle fa-sm" aria-hidden="true"></i>Create new badge</a>

Multiple links with icons

To group links, put them into the div element and apply the styling to the created div. For most Backoffice cases, we need to add the `flex-gap--right` class to align links to the right.

<div class="flex-gap--right">
  <a class="mr3" href=""><i class="fa fa-plus-circle fa-sm" aria-hidden="true"></i>New screening</a>
  <a href=""><i class="fas fa-external-link-square fa-sm"></i>Open film scheduling</a>
</div>

Profile links and searchable items (previously tags)

In various Eventival sections, we are using the items that perform one of two actions: inserting the text of the clicked item to the search and opening the related profile. These items have their own backgrounds and have the small icon in the top-right corner of the text.

Profile links

Once clicked, they opens the corresponding profile. Their background colors depends on the modules they relate to.

<div>
  <span class="profile-link profile-link--person"><a href="#">John Doe</a></span>
  <span class="profile-link profile-link--company"><a href="#">Eventival</a></span>
  <span class="profile-link profile-link--film"><a href="#">Parasite</a></span>
  <span class="profile-link profile-link--event"><a href="#">Opening ceremony</a></span>
  <span class="profile-link profile-link--mission"><a href="#">Eventival management</a></span>
</div>

Link-like item - anchor

For items that are not links when it comes to HTML (which means that they do not have the "a" tag) but they need link's stylinh. Just add the "anchor" class to any other HTML tag to add the link styling.

  <span class="anchor">More</span>

Design guideline

The link is the inline element, to overwrite this property, you can use, for example, the db (display: block) class.

States of links

Each links has various states that need to be considered when changing the default values of the links.

Descriptive links

Most of your web visitors are passing through on their way to some other destination and will appreciate your efforts to make the trip as straightforward and predictable as possible, with few meaningless side trips or dead ends. Key to the success of any trip is the clarity of the signage along the way, which in the web context comes in the form of links.

Links are the signposts that help users know which route is most likely to get them to their destination. Good link text gives users a description of the page that will load, allowing them to make informed decisions about which path to take. Bad link text, such as nondescriptive “click here” links or catchy but meaningless phrases, forces the user to follow the link to learn its destination. Nondescriptive links often lead to dead ends, requiring users to retrace their steps and waste time.

When writing links, never construct a sentence around a link phrase, such as “click here for more information.” Write the sentence as you normally would, and place the link anchor on the keyword or phrase that best describes the additional content you are linking to.