Link Series

<div class="c-link-series" data-bkg-theme="">
    <div class="o-container">
        <div class="c-link-series__content">
            <div class="c-link-series__content-header">
                <h2 class="c-link-series__content-title f-title--h4" id="link-series577">Research for scientists and researchers</h2>

                <a href=# class="o-btn o-btn--expanding-arrow f-text--cta u-hover-drawline--parent--thin c-link-series__explore-link">
                    <span class="u-hover-drawline--child">EXPLORE ALL RESOURCES</span>
                    <span class="o-btn__icon" 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>

            </div>
            <p class="f-text--reg c-link-series__content-desc">Search our publications, learn about available services, and reference our specimen loan policies. Nam quis sapien sagittis, venenatis ex at, mattis erat. Aenean sed neque blandit.</p>
        </div>
        <ul class="c-link-series__items o-row" aria-labelledby="link-series577">

            <li class="c-link-series__item o-col o-col-sm-6">
                <a href="#" class="c-link-series__item-link u-expanding-cta-arrow">
                    <span class="f-text--large f-bold">Publications</span>
                    <span class="o-btn__icon" 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="c-link-series__item o-col o-col-sm-6">
                <a href="#" class="c-link-series__item-link u-expanding-cta-arrow">
                    <span class="f-text--large f-bold">Policies</span>
                    <span class="o-btn__icon" 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="c-link-series__item o-col o-col-sm-6">
                <a href="#" class="c-link-series__item-link u-expanding-cta-arrow">
                    <span class="f-text--large f-bold">Collections Databases</span>
                    <span class="o-btn__icon" 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="c-link-series__item o-col o-col-sm-6">
                <a href="#" class="c-link-series__item-link u-expanding-cta-arrow">
                    <span class="f-text--large f-bold">Services</span>
                    <span class="o-btn__icon" 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="c-link-series__item o-col o-col-sm-6">
                <a href="#" class="c-link-series__item-link u-expanding-cta-arrow">
                    <span class="f-text--large f-bold">Fellowships and Endowments</span>
                    <span class="o-btn__icon" 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>
        <a href=# class="o-btn o-btn--expanding-arrow f-text--cta u-hover-drawline--parent--thin c-link-series__explore-link-mobile u-hover-drawline--child">
            <span class="u-hover-drawline--child">EXPLORE ALL RESOURCES</span>
            <span class="o-btn__icon" 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>
    </div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'link-series' ~ random(5000) %}

<div class="c-link-series" data-bkg-theme="{{ panelColorTheme }}">
	<div class="o-container">
		<div class="c-link-series__content">
			<div class="c-link-series__content-header">
				<h2 class="c-link-series__content-title f-title--h4" id="{{ hID }}">{{title}}</h2>
				{% if ctaLink %}
					<a href={{ctaLink}} class="o-btn o-btn--expanding-arrow f-text--cta u-hover-drawline--parent--thin c-link-series__explore-link">
						<span class="u-hover-drawline--child">{{ctaTitle}}</span>
						<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
					</a>
				{% endif %}
			</div>
			<p class="f-text--reg c-link-series__content-desc">{{description}}</p>
		</div>
		<ul class="c-link-series__items o-row" aria-labelledby="{{ hID }}">
			{% for item in items %}
				<li class="c-link-series__item o-col o-col-sm-6">
					<a href="{{item.link}}" class="c-link-series__item-link u-expanding-cta-arrow">
						<span class="f-text--large f-bold">{{item.title}}</span>
						<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
					</a>
				</li>
			{% endfor %}
		</ul>
		<a href={{ctaLink}} class="o-btn o-btn--expanding-arrow f-text--cta u-hover-drawline--parent--thin c-link-series__explore-link-mobile u-hover-drawline--child">
			<span class="u-hover-drawline--child">{{ctaTitle}}</span>
			<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
		</a>
	</div>
</div>
{
  "pageColorTheme": "teal",
  "hTag": "h2",
  "title": "Research for scientists and researchers",
  "description": "Search our publications, learn about available services, and reference our specimen loan policies. Nam quis sapien sagittis, venenatis ex at, mattis erat. Aenean sed neque blandit.",
  "ctaTitle": "EXPLORE ALL RESOURCES",
  "ctaLink": "#",
  "items": [
    {
      "title": "Publications",
      "link": "#"
    },
    {
      "title": "Policies",
      "link": "#"
    },
    {
      "title": "Collections Databases",
      "link": "#"
    },
    {
      "title": "Services",
      "link": "#"
    },
    {
      "title": "Fellowships and Endowments",
      "link": "#"
    }
  ]
}
  • Content:
    .c-link-series {
      margin: 6.4rem 0 3rem;
    
      @include break($sm) {
        margin: 21.4rem 0;
      }
    
      &[data-bkg-theme='light'] {
        margin: 0;
        padding: 8.4rem 0;
    
        @include break($sm) {
          margin: 0;
          padding: 21.4rem 0;
        }
      }
    }
    
    .c-link-series__explore-link {
      display: none;
      @include break($sm) {
        display: flex;
      }
    }
    
    .c-link-series__content-title {
      margin-bottom: 2rem;
      @include break($sm) {
        margin-bottom: auto;
      }
    }
    .c-link-series__content {
      margin-bottom: 4rem;
    
      @include break($sm) {
        margin-bottom: 6rem;
      }
    }
    
    .c-link-series__content-header {
      border-bottom: 0.2rem solid var(--ct-txt);
      padding-bottom: 1rem;
    
      @include break($sm) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-bottom: 2rem;
      }
    }
    
    .c-link-series__content-desc {
      margin-top: 2rem;
      @include break($sm) {
        margin-top: 3.2rem;
        width: 76%;
      }
    }
    
    .c-link-series__item {
      margin-bottom: 2.4rem;
    
      @include break($sm) {
        margin-bottom: 4rem;
      }
    }
    
    .c-link-series__item-link {
      display: inline-flex;
      align-items: center;
    }
    
    .c-link-series__explore-link-mobile {
      @include break($sm) {
        display: none;
      }
    }
    
  • URL: /components/raw/link-series/link-series.scss
  • Filesystem Path: patterns\06-components\link-series\link-series.scss
  • Size: 1.3 KB

No notes defined.