Publication List

<div class="publication-list" data-bkg-theme="dark">
    <div class="o-container">
        <div class="o-row">
            <div class="o-col o-col-xs-10 o-col-xs--offset-1 o-col-sm-md-8 o-col-sm--offset-2">
                <div class="publication-list__content">
                    <h2 class="publication-list__title f-text--lg f-bold">Publication list title</h2>
                    <ul class="publication-list__list" id="publication-list-986">

                        <li class="publication-list__item">
                            <a href="#" class="publication-list__item-link">
                                <p class="publication-list__item-title f-text--small f-bold">
                                    <span class="u-hover-drawline u-hover-drawline--thin">Age and population structure of the Rio Grande Silvery Minnow (Hybognathus amarus) with respect to life history and hydrological modification. </span>
                                </p>

                                <p class="publication-list__citation f-text--small ">Horwitz, R.J., D. Keller, S. Platania, et al. Transactions of the American Fisheries Society. 2018; 147:265-277.</p>
                                <span class="publication-list__icon u-expanding-cta-arrow" aria-hidden="true">
                                    <svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
                                        <path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
                                    </svg>

                                </span>
                            </a>
                        </li>

                        <li class="publication-list__item">
                            <a href="#" class="publication-list__item-link">
                                <p class="publication-list__item-title f-text--small f-bold">
                                    <span class="u-hover-drawline u-hover-drawline--thin">Age and population structure of the Rio Grande Silvery Minnow (Hybognathus amarus) with respect to life history and hydrological modification. </span>
                                </p>

                                <p class="publication-list__citation f-text--small ">Horwitz, R.J., D. Keller, S. Platania, et al. Transactions of the American Fisheries Society. 2018; 147:265-277.</p>
                                <span class="publication-list__icon u-expanding-cta-arrow" aria-hidden="true">
                                    <svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
                                        <path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
                                    </svg>

                                </span>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'publication-list-' ~ random(5000) %}

<div class="publication-list" data-bkg-theme="{{ panelColorTheme }}">
  <div class="o-container">
    <div class="o-row">
      <div class="o-col o-col-xs-10 o-col-xs--offset-1 o-col-sm-md-8 o-col-sm--offset-2">
        <div class="publication-list__content">
          <h2 class="publication-list__title f-text--lg f-bold">{{title}}</h2>
          <ul class="publication-list__list" id="{{ hID}}">
            {% for item in items %}
              <li class="publication-list__item">
                <a href="{{ item.link }}" class="publication-list__item-link">
                  <p class="publication-list__item-title f-text--small f-bold">
                    <span class="u-hover-drawline u-hover-drawline--thin">{{item.title}}</span>
                  </p>
                  {% for autor in authors %}
                    <p class="publication-list__name">{{item.firstName}}
                      {{item.lastName}}</p>
                  {% endfor %}
                  <p class="publication-list__citation f-text--small ">{{item.citation}}</p>
                  <span class="publication-list__icon u-expanding-cta-arrow" aria-hidden="true">
                    {% include "03-icons/cta-expanding-arrow" %}
                  </span>
                </a>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{
  "pageColorTheme": "teal",
  "title": "Publication list title",
  "panelColorTheme": "dark",
  "items": [
    {
      "title": "Age and population structure of the Rio Grande Silvery Minnow (Hybognathus amarus) with respect to life history and hydrological modification. ",
      "link": "#",
      "authors": [
        {
          "firstName": "",
          "lastName": ""
        },
        {
          "firstName": "",
          "lastName": ""
        }
      ],
      "citation": "Horwitz, R.J., D. Keller, S. Platania, et al. Transactions of the American Fisheries Society. 2018; 147:265-277."
    },
    {
      "title": "Age and population structure of the Rio Grande Silvery Minnow (Hybognathus amarus) with respect to life history and hydrological modification. ",
      "link": "#",
      "authors": [
        {
          "firstName": "",
          "lastName": ""
        },
        {
          "firstName": "",
          "lastName": ""
        }
      ],
      "citation": "Horwitz, R.J., D. Keller, S. Platania, et al. Transactions of the American Fisheries Society. 2018; 147:265-277."
    }
  ]
}
  • Content:
    .publication-list {
      margin: 3.2rem auto;
    
      @include break($sm) {
        margin: 12rem auto;
      }
    
      &[data-bkg-theme='light'] {
        margin: 0;
        padding: 3.2rem 0;
    
        @include break($sm) {
          margin: 0;
          padding: 6.4rem 0;
        }
      }
    }
    
    .publication-list__title {
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--ct-txt);
    }
    
    .publication-list__item {
      width: 95%;
      margin: 4.5rem 0;
    }
    
    .publication-list__citation {
      margin-bottom: 1.5rem;
    }
    
  • URL: /components/raw/publication-list/publication-list.scss
  • Filesystem Path: patterns\06-components\publication-list\publication-list.scss
  • Size: 494 Bytes

No notes defined.