Links

In this section, we are going to give you an overview of how Milestone Systems website links are defined.

Table of contents

Overview

Milestone links have been defined in three types, primary, secondary and custom links.

The custom links are specific to a context (block or sections) such as header, footer, cards etc… Their definition will overwrite the primary link definition.

Therefore on this page we will focus on the primary and secondary link definitions based on light or dark background.

Primary Links

Primary Link Overview

The primary links are our default and don’t require any specific CSS class. The styling will be applied automatically on any links. The definition will be overwritten if the link is of type secondary or custom link.

We have designed different links based on the background color used on the page/block. Based on the background selection in the block/page property, the links will automatically get the correct styling. No need to add extra CSS classes. Therefore we are not adding the HTML code under the primary link representation.

On Light background Colors

Below is the styling of Milestone primary links used on light background colors. The representation is showing the primary links on each of what is considered light background colors.

On Dark background Colors

Below is the styling of Milestone primary links used on dark background colors. The representation is showing the primary links on each of what is considered dark background colors.

Secondary Links

The secondary links are used for specific cases where we would like to avoid to highlight the link. For that reason, the link will keep the current text color in which it belongs.

To perform this styling, we need to apply a specific CSS class called “msds-link–secondary”.

<div class="container-fluid">
  <div class="row">    
    <div class="col-12 col-sm-6 mb-5">
      <div class="msds-bg-white p-6">
        <h3 class="msds-text-gray-10">On White background</h3>
        <p class="msds-text-gray-10">Whether you have a small flower shop with a few cameras, or an airport with +1,000, we have a solution for you. With <a href="/docs/content/typography/links" class="msds-link--secondary">our product range</a> our product range you can choose the exact solution your business needs now.</p>
        <p class="msds-text-gray-10">You can easily <a href="/docs/content/typography/links" class="msds-link--secondary">upgrade or add functionality</a> should your needs change alter. Build your surveillance system on a <a href="/docs/content/typography/links" class="msds-link--secondary">solid foundation</a>. Build it with Milestone XProtect.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 mb-5">      
      <div class="msds-bg-yellow p-6">
        <h3 class="msds-text-clear-blue">On Yellow background</h3>
        <p class="msds-text-clear-blue">Whether you have a small flower shop with a few cameras, or an airport with +1,000, we have a solution for you. With <a href="/docs/content/typography/links" class="msds-link--secondary">our product range</a> our product range you can choose the exact solution your business needs now.</p>
        <p class="msds-text-clear-blue">You can easily <a href="/docs/content/typography/links" class="msds-link--secondary">upgrade or add functionality</a> should your needs change alter. Build your surveillance system on a <a href="/docs/content/typography/links" class="msds-link--secondary">solid foundation</a>. Build it with Milestone XProtect.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 mb-5">
      <div class="msds-bg-dark-blue p-6">
        <h3 class="msds-text-white">On Dark Blue Background</h3>
        <p class="msds-text-white">Whether you have a small flower shop with a few cameras, or an airport with +1,000, we have a solution for you. With <a href="/docs/content/typography/links" class="msds-link--secondary">our product range</a> our product range you can choose the exact solution your business needs now.</p>
        <p class="msds-text-white">You can easily <a href="/docs/content/typography/links" class="msds-link--secondary">upgrade or add functionality</a> should your needs change alter. Build your surveillance system on a <a href="/docs/content/typography/links" class="msds-link--secondary">solid foundation</a>. Build it with Milestone XProtect.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 mb-5">      
      <div class="msds-bg-mixed-blue-gradient p-6">
       <h3 class="msds-text-gray-4">On Mixed Blue Background</h3>
        <p class="msds-text-gray-4">Whether you have a small flower shop with a few cameras, or an airport with +1,000, we have a solution for you. With <a href="/docs/content/typography/links" class="msds-link--secondary">our product range</a> our product range you can choose the exact solution your business needs now.</p>
        <p class="msds-text-gray-4">You can easily <a href="/docs/content/typography/links" class="msds-link--secondary">upgrade or add functionality</a> should your needs change alter. Build your surveillance system on a <a href="/docs/content/typography/links" class="msds-link--secondary">solid foundation</a>. Build it with Milestone XProtect.</p>
      </div>
    </div>    
  </div>
</div>