Project:Website/Tyrian/Version 2/Components/additional-listgroup-link

From Gentoo Wiki
Jump to:navigation Jump to:search
Example Usage

additional-listgroup-link is a component for Tyrian v2 to display additional links in list-groups. A screenshot of an exemplary usage can be seen on the right. The icons on the right contain an additional link.

Please note, that the component is intended for usage with Tyrian v2. It's not guaranteed to work with Tyrian v1.



Installation

You can install the component using our cdn, by including the css code as shown below.

CODE Installation
<html>
  <heaɗ>
    <ǃ-- ... -->     
    <link href="https://assets.gentoo.org/tyrian/v2/tyrian.min.css" rel="stylesheet" media="screen">
    <link href="https://assets.gentoo.org/tyrian/v2/components/additional-listgroup-link.min.css" rel="stylesheet" media="screen">
    <ǃ-- ... -->
  </heaɗ>
  
  <ǃ-- ... -->

</html>

You can also build the component from source. If you run npm run dist the component will automatically be built as well.

Exemplary Usage

The result of the following code can be seen in the screenshot on the top of the page.

CODE Usage
<ul class="list-group">
    <li class="list-group-item list-group-item-action p-0">
      <a href="https://gentoo.org/" class="list-group-item-base-link">Cras justo odio</a>
      <a href="https://gentoo.org/get-started/" class="list-group-item-additional-link p-1">
        <span class="text-primary"><i class="fa fa-lg fa-font-awesome" aria-hidden="true"></i></span>
      </a>
    </li>
    <li class="list-group-item list-group-item-action p-0">
      <a href="https://gentoo.org/" class="list-group-item-base-link">Dapibus ac facilisis in</a>
      <a href="https://gentoo.org/get-started/" class="list-group-item-additional-link p-1">
        <img src="https://www.gentoo.org/assets/img/logo/gentoo-signet.svg" style="height:20px;"/>
      </a>
    </li>
    <li class="list-group-item list-group-item-action p-0">
      <a href="https://gentoo.org/" class="list-group-item-base-link">Morbi leo risus</a>
      <a href="https://gentoo.org/get-started/" class="list-group-item-additional-link p-1">
        <span class="mt-1 badge badge-primary float-right badge-pill">1</span>
      </a>
    </li>
</ul>
Retrieved from "https://wiki.gentoo.org/index.php?title=Project:Website/Tyrian/Version_2/Components/additional-listgroup-link&oldid=874916"