List summary

deprecatedv1.0.0

Style the links listed as an article summary

Overview

Use this element inside aside card elements, to style them correctly as summary lists.

Usage

Dependencies

To get the List-summary component working, include the dependencies in your project in the following order:

  1. npm
  2. Sass
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/03-organisms/card/card--aside';
@import 'design-system/src/scss/03-organisms/list-summary';

Basic code

This classes are to be used only inside aside elements that have a class card applied to them.

  1. Pug
  2. HTML
nav(class='card card--aside')
  p.card__title Summary
  ol.list-summary
    li.list-summary__item
      a.list-summary__link(href='#' title='title') Link
    li.list-summary__item
      a.list-summary__link(href='#' title='title') Link
    li.list-summary__item
      a.list-summary__link(href='#' title='title') Link

<nav class="card card--aside">
  <p class="card__title">Summary</p>
  <ol class="list-summary">
    <li class="summary__item">
      <a href="#" title="title">Link</a>
    </li>
    <li class="summary__item">
      <a href="#" title="title">Link</a>
    </li>
    <li class="summary__item">
      <a href="#" title="title">Link</a>
    </li>
  </ol>