Skip to main content
Design System

Feature Links

Textured Feature Links

Currently we have the following textured feature links available: --textured-dark-red-ramen (default), --textured-dark-blue-ramen, --textured-dark-gray-ramen, and --textured-dark-smokey-gray-ramen.

Featured Links (Default - Dark Red Ramen)

Code

<h2 class="visuallyhidden">Featured Links</h2>
		<ul class="o-unstyled-list o-fixed-grid o-fixed-grid--two-up">
		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-red-ramen c-feature-link--medium-red" href="#0">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>

		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-red-ramen c-feature-link--medium-red" href="#0">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>

		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-red-ramen c-feature-link--medium-red" href="https://events.illinoisstate.edu">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>

		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-red-ramen c-feature-link--medium-red" href="#0">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>
		 </ul>
/* line 39, core/src/components/_feature-links.scss */
		.c-feature-link {
		  --align-content: center;
		  --align-items: center;
		  --border-radius: var(--border-radius-default);
		  --display: grid;
		  --fg-color: var(--link-color-on-dark);
		  --grid-areas: "overlay";
		  --justify-content: center;
		  --justify-items: start;
		  --overflow: hidden;
		  --place-content: var(--align-content) var(--justify-content);
		  --place-items: var(--align-items) var(--justify-items);
		  --text-decoration: none;
		  --text-shadow: var(--text-shadow-on-dark);
		  border-radius: var(--border-radius);
		  color: var(--fg-color);
		  display: var(--display);
		  grid-template-areas: var(--grid-areas);
		  place-content: var(--place-content);
		  place-items: var(--place-items);
		  text-decoration: var(--text-decoration);
		  text-shadow: var(--text-shadow);
		}

		/* line 63, core/src/components/_feature-links.scss */
		.c-feature-link:focus {
		  --bg-color: var(--color-transparent-black);
		  --link-focus-outline-color: black;
		  --link-focus-outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-outline-color);
		}

		/* line 69, core/src/components/_feature-links.scss */
		.c-feature-link:focus, .c-feature-link:hover, .c-feature-link:active {
		  --fg-color: var(--link-color-on-dark);
		}

		/* line 74, core/src/components/_feature-links.scss */
		.c-feature-link:focus .c-feature-link__content, .c-feature-link:hover .c-feature-link__content, .c-feature-link:active .c-feature-link__content {
		  background-color: var(--bg-color);
		}

		/* line 81, core/src/components/_feature-links.scss */
		.c-feature-link:focus .c-feature-link__image-overlay, .c-feature-link:hover .c-feature-link__image-overlay {
		  --bg-overlay: var(--color-transparent-black-10);
		}

		/* line 85, core/src/components/_feature-links.scss */
		.c-feature-link:focus .c-feature-link__content, .c-feature-link:hover .c-feature-link__content {
		  --bg-color: var(--color-transparent-black-60);
		}

		/* line 90, core/src/components/_feature-links.scss */
		.c-feature-link:focus .c-feature-link__copy::after, .c-feature-link:hover .c-feature-link__copy::after {
		  transition: var(--transition-props) var(--transition-duration) var(--transition-timing) var(--transition-delay);
		  transform: var(--transform);
		}

		/* line 98, core/src/components/_feature-links.scss */
		.c-feature-link:active .c-feature-link__content {
		  --bg-color: var(--color-transparent-black);
		}

		/* line 103, core/src/components/_feature-links.scss */
		.c-feature-link::before, .c-feature-link::after {
		  --display: none;
		}

		/* line 111, core/src/components/_feature-links.scss */
		.c-feature-link[href^="http://"] .c-feature-link__copy::after, .c-feature-link[href^="https://"] .c-feature-link__copy::after {
		  --content: var(--icon-external-link);
		  --font-size: .625em;
		  --inset-space-inline: var(--space-xs);
		  transition: none;
		}

		/* line 123, core/src/components/_feature-links.scss */
		.c-feature-link[href^="http://"]:hover .c-feature-link__copy::after, .c-feature-link[href^="http://"]:focus .c-feature-link__copy::after, .c-feature-link[href^="https://"]:hover .c-feature-link__copy::after, .c-feature-link[href^="https://"]:focus .c-feature-link__copy::after {
		  --animation: var(--animation-quick-links-external);
		  --transform: none;
		  animation: var(--animation);
		  transition: none;
		}

		@media (prefers-reduced-motion: reduce) {
		  /* line 137, core/src/components/_feature-links.scss */
		  .c-feature-link:focus .c-feature-link__media, .c-feature-link:hover .c-feature-link__media {
			--transform: none;
		  }
		}

		/* line 145, core/src/components/_feature-links.scss */
		.c-feature-link > * {
		  --grid-area: overlay;
		  border-radius: var(--border-radius);
		  grid-area: var(--grid-area);
		}

		/* line 153, core/src/components/_feature-links.scss */
		.c-feature-link__media {
		  --align-items: end;
		  --display: grid;
		  --grid-areas: "media-overlay";
		  --size-block: 100%;
		  --size-inline: 100%;
		  --transition-duration: 200ms;
		  --transition-props: transform;
		  --transition-timing-function: cubic-bezier(.39, .575, .565, 1);
		  align-items: var(--align-items);
		  block-size: var(--size-block);
		  display: var(--display);
		  grid-template-areas: var(--grid-areas);
		  inline-size: var(--size-inline);
		  transition: var(--transition-props) var(--transition-duration) var(--transition-timing-function);
		}

		/* line 173, core/src/components/_feature-links.scss */
		.c-feature-link__media > * {
		  --grid-area: media-overlay;
		  block-size: var(--size-block);
		  border-radius: var(--border-radius);
		  grid-area: var(--grid-area);
		  inline-size: var(--size-inline);
		}

		/* line 183, core/src/components/_feature-links.scss */
		.c-feature-link__image {
		  --aspect-ratio: 4 / 1;
		  --object-fit: cover;
		  aspect-ratio: var(--aspect-ratio);
		  object-fit: var(--object-fit);
		}

		@media only screen and (min-width: 960px) {
		  /* line 183, core/src/components/_feature-links.scss */
		  .c-feature-link__image {
			--aspect-ratio: 5 / 1;
		  }
		}

		@media only screen and (min-width: 1440px) {
		  /* line 183, core/src/components/_feature-links.scss */
		  .c-feature-link__image {
			--aspect-ratio: 6 / 1;
		  }
		}

		/* line 200, core/src/components/_feature-links.scss */
		.c-feature-link__content {
		  --align-items: center;
		  --bg-gradient: linear-gradient(var(--bg-gradient-direction),
			var(--bg-gradient-color-start) var(--bg-gradient-stop-start),
			var(--bg-gradient-color-mid) var(--bg-gradient-stop-mid),
			var(--bg-gradient-color-end) var(--bg-gradient-stop-end)
		  );
		  --bg-gradient-color-start: var(--color-transparent-black);
		  --bg-gradient-color-mid: var(--color-transparent-black-60);
		  --bg-gradient-color-end: var(--color-transparent-black-0);
		  --bg-gradient-direction: to right;
		  --bg-gradient-position: left top;
		  --bg-gradient-repeat: no-repeat;
		  --bg-gradient-size: auto;
		  --bg-gradient-stop-start: 0%;
		  --bg-gradient-stop-mid: calc((100% / 3) * 2);
		  --bg-gradient-stop-end: 100%;
		  --display: flex;
		  --gap-space: var(--space-md);
		  --inset-space-block: var(--space-tight);
		  --inset-space-inline: var(--space-comfy);
		  --justify-items: start;
		  --size-block: 100%;
		  --size-inline: 100%;
		  background: var(--bg-gradient) var(--bg-gradient-repeat) var(--bg-gradient-position)/var(--bg-gradient-size);
		  block-size: var(--size-block);
		  display: var(--display);
		  gap: var(--gap-space);
		  inline-size: var(--size-inline);
		  padding: var(--inset-space-block) var(--inset-space-inline);
		  place-items: var(--align-items) var(--justify-items);
		}

		/* line 235, core/src/components/_feature-links.scss */
		.c-feature-link__copy {
		  --block-space-end: 0;
		  --font-size: var(--font-size-copy-2xl);
		  --font-stack: var(--font-stack-display-sans);
		  --font-weight: var(--font-weight-bold);
		  --text-decoration: none;
		  --transition-delay: var(--action-link-transition-delay);
		  --transition-duration: var(--action-link-transition-duration);
		  --transition-props: var(--action-link-transition-props);
		  --transition-timing: var(--action-link-transition-timing);
		  color: var(--fg-color);
		  font-family: var(--font-stack);
		  font-size: var(--font-size);
		  font-weight: var(--font-weight);
		  text-decoration: var(--text-decoration);
		}

		/* line 252, core/src/components/_feature-links.scss */
		.c-feature-link__copy::after {
		  --content: var(--icon-chevron-right);
		  --display: inline-block;
		  --font-size: .6em;
		  --inline-space: -1ch;
		  --inset-space-inline: var(--space-2xs);
		  --text-decoration: none;
		  --transform: var(--action-link-transform-after);
		  --vertical-align: middle;
		  --white-space: nowrap;
		  content: var(--content);
		  display: var(--display);
		  font-size: var(--font-size);
		  margin-right: var(--inline-space);
		  padding-right: var(--inset-space-inline);
		  padding-left: var(--inset-space-inline);
		  text-decoration: var(--text-decoration);
		  text-shadow: var(--text-shadow);
		  transition: var(--transition-props) var(--transition-duration) var(--transition-timing) var(--transition-delay);
		  vertical-align: var(--vertical-align);
		  white-space: var(--white-space);
		}

		/* line 277, core/src/components/_feature-links.scss */
		.c-feature-link--textured {
		  --align-content: stretch;
		  --aspect-ratio: 4 / 1;
		  --justify-content: stretch;
		  aspect-ratio: var(--aspect-ratio);
		}

		@media only screen and (min-width: 960px) {
		  /* line 277, core/src/components/_feature-links.scss */
		  .c-feature-link--textured {
			--aspect-ratio: 5 / 1;
		  }
		}

		@media only screen and (min-width: 1200px) {
		  /* line 277, core/src/components/_feature-links.scss */
		  .c-feature-link--textured {
			--aspect-ratio: 6 / 1;
		  }
		}

		/* line 292, core/src/components/_feature-links.scss */
		.c-feature-link--textured .c-feature-link__media {
		  background: var(--bg-pattern-color) var(--bg-pattern) var(--bg-pattern-repeat) var(--bg-pattern-position);
		}

		/* line 299, core/src/components/_feature-links.scss */
		.c-feature-link--textured-dark-red-ramen .c-feature-link__media {
		  --bg-pattern-color: var(--color-dark-red);
		  --bg-pattern: var(--bg-pattern-dark-red-ramen);
		  --bg-pattern-position: left top;
		  --bg-pattern-repeat: repeat;
		  --display: block;
		}


		/* line 342, core/src/components/_feature-links.scss */
		.c-feature-link--medium-red {
		  --text-shadow: var(--text-shadow-on-dark-red);
		}

		/* line 345, core/src/components/_feature-links.scss */
		.c-feature-link--medium-red .c-feature-link__content {
		  --bg-gradient-color-start: var(--color-transparent-medium-red);
		  --bg-gradient-color-mid: var(--color-transparent-medium-red-60);
		  --bg-gradient-color-end: var(--color-transparent-medium-red-0);
		}

		/* line 351, core/src/components/_feature-links.scss */
		.c-feature-link--medium-red:focus {
		  --link-focus-outline-color: var(--color-transparent-dark-red);
		}

		/* line 357, core/src/components/_feature-links.scss */
		.c-feature-link--medium-red:focus .c-feature-link__content, .c-feature-link--medium-red:hover .c-feature-link__content {
		  --bg-color: var(--color-transparent-dark-red-40);
		  --bg-gradient-color-start: var(--color-transparent-dark-red);
		  --bg-gradient-color-mid: var(--color-transparent-dark-red-60);
		  --bg-gradient-color-end: var(--color-transparent-dark-red-0);
		}

		/* line 366, core/src/components/_feature-links.scss */
		.c-feature-link--medium-red:active .c-feature-link__content {
		  --bg-color: var(--color-transparent-dark-red);
		  --bg-gradient-color-start: var(--color-transparent-dark-red);
		  --bg-gradient-color-mid: var(--color-transparent-dark-red);
		  --bg-gradient-color-end: var(--color-transparent-dark-red);
		}

Featured Links (Dark Blue Ramen)

Code

<h2 class="visuallyhidden">Featured Links</h2>
		<ul class="o-unstyled-list o-fixed-grid o-fixed-grid--two-up">
		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-red-ramen c-feature-link--medium-red" href="#0">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>

		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-blue-ramen c-feature-link--blue" href="#0">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>
		 </ul>
/* line 310, core/src/components/_feature-links.scss */
		.c-feature-link--textured-dark-blue-ramen .c-feature-link__media {
		  --bg-pattern-color: var(--color-dark-blue);
		  --bg-pattern: var(--bg-pattern-dark-blue-ramen);
		  --bg-pattern-position: left top;
		  --bg-pattern-repeat: repeat;
		  --display: block;
		}

		/* line 376, core/src/components/_feature-links.scss */
		.c-feature-link--blue {
		  --text-shadow: var(--text-shadow-on-dark-blue);
		}

		/* line 379, core/src/components/_feature-links.scss */
		.c-feature-link--blue .c-feature-link__content {
		  --bg-gradient-color-start: var(--color-transparent-blue);
		  --bg-gradient-color-mid: var(--color-transparent-blue-60);
		  --bg-gradient-color-end: var(--color-transparent-blue-0);
		}

		/* line 385, core/src/components/_feature-links.scss */
		.c-feature-link--blue:focus {
		  --link-focus-outline-color: var(--color-transparent-dark-blue);
		}

		/* line 391, core/src/components/_feature-links.scss */
		.c-feature-link--blue:focus .c-feature-link__content, .c-feature-link--blue:hover .c-feature-link__content {
		  --bg-color: var(--color-transparent-dark-blue-40);
		  --bg-gradient-color-start: var(--color-transparent-dark-blue);
		  --bg-gradient-color-mid: var(--color-transparent-dark-blue-60);
		  --bg-gradient-color-end: var(--color-transparent-dark-blue-0);
		}

		/* line 400, core/src/components/_feature-links.scss */
		.c-feature-link--blue:active .c-feature-link__content {
		  --bg-color: var(--color-transparent-dark-blue);
		  --bg-gradient-color-start: var(--color-transparent-dark-blue);
		  --bg-gradient-color-mid: var(--color-transparent-dark-blue);
		  --bg-gradient-color-end: var(--color-transparent-dark-blue);
		}

Featured Links (Dark Gray Ramen)

Code

<h2 class="visuallyhidden">Featured Links</h2>
		<ul class="o-unstyled-list o-fixed-grid o-fixed-grid--two-up">
		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-gray-ramen c-feature-link--medium-gray" href="#0">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>

		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-gray-ramen c-feature-link--medium-gray" href="#0">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>
		 </ul>
/* line 321, core/src/components/_feature-links.scss */
		.c-feature-link--textured-dark-gray-ramen .c-feature-link__media {
		  --bg-pattern-color: var(--color-dark-gray);
		  --bg-pattern: var(--bg-pattern-dark-gray-ramen);
		  --bg-pattern-position: left top;
		  --bg-pattern-repeat: repeat;
		  --display: block;
		}

		/* line 410, core/src/components/_feature-links.scss */
		.c-feature-link--medium-gray {
		  --text-shadow: var(--text-shadow-on-dark-gray);
		}

		/* line 413, core/src/components/_feature-links.scss */
		.c-feature-link--medium-gray .c-feature-link__content {
		  --bg-gradient-color-start: var(--color-transparent-medium-gray);
		  --bg-gradient-color-mid: var(--color-transparent-medium-gray-40);
		  --bg-gradient-color-end: var(--color-transparent-medium-gray-0);
		}

		/* line 419, core/src/components/_feature-links.scss */
		.c-feature-link--medium-gray:focus {
		  --link-focus-outline-color: var(--color-transparent-dark-gray);
		}

		/* line 425, core/src/components/_feature-links.scss */
		.c-feature-link--medium-gray:focus .c-feature-link__content, .c-feature-link--medium-gray:hover .c-feature-link__content {
		  --bg-color: var(--color-transparent-dark-gray-20);
		  --bg-gradient-color-start: var(--color-transparent-dark-gray);
		  --bg-gradient-color-mid: var(--color-transparent-dark-gray-40);
		  --bg-gradient-color-end: var(--color-transparent-dark-gray-0);
		}

		/* line 434, core/src/components/_feature-links.scss */
		.c-feature-link--medium-gray:active .c-feature-link__content {
		  --bg-color: var(--color-transparent-dark-gray);
		  --bg-gradient-color-start: var(--color-transparent-dark-gray);
		  --bg-gradient-color-mid: var(--color-transparent-dark-gray);
		  --bg-gradient-color-end: var(--color-transparent-dark-gray);
		}

Featured Links (Dark Smokey Gray Ramen)

These should not be used outside of College of Business unless recommended/approved by Trey.

Code

<h2 class="visuallyhidden">Featured Links</h2>
		<ul class="o-unstyled-list o-fixed-grid o-fixed-grid--two-up">
		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-smokey-gray-ramen c-feature-link--smokey-gray" href="#0">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>

		  <li class="c-feature-link__wrap">
			 <a class="c-feature-link c-feature-link--textured c-feature-link--textured-dark-smokey-gray-ramen c-feature-link--smokey-gray" href="#0">
			  <div class="c-feature-link__media"><!-- background pattern --></div>
			  <div class="c-feature-link__content">
				<span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
					<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
						<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
					</ouc:div>
				</span>
				<h3 class="c-feature-link__copy">Feature Link Copy</h3>
			  </div>
			 </a>
		  </li>
		 </ul>
/* line 332, core/src/components/_feature-links.scss */
		.c-feature-link--textured-dark-smokey-gray-ramen .c-feature-link__media {
		  --bg-pattern-color: var(--color-dark-smokey-gray);
		  --bg-pattern: var(--bg-pattern-dark-smokey-gray-ramen);
		  --bg-pattern-position: left top;
		  --bg-pattern-repeat: repeat;
		  --display: block;
		}

		/* line 444, core/src/components/_feature-links.scss */
		.c-feature-link--smokey-gray {
		  --text-shadow: var(--text-shadow-on-dark-smokey-gray);
		}

		/* line 447, core/src/components/_feature-links.scss */
		.c-feature-link--smokey-gray .c-feature-link__content {
		  --bg-gradient-color-start: var(--color-transparent-smokey-gray);
		  --bg-gradient-color-mid: var(--color-transparent-smokey-gray-40);
		  --bg-gradient-color-end: var(--color-transparent-smokey-gray-0);
		}

		/* line 453, core/src/components/_feature-links.scss */
		.c-feature-link--smokey-gray:focus {
		  --link-focus-outline-color: var(--color-transparent-dark-smokey-gray);
		}

		/* line 459, core/src/components/_feature-links.scss */
		.c-feature-link--smokey-gray:focus .c-feature-link__content, .c-feature-link--smokey-gray:hover .c-feature-link__content {
		  --bg-color: var(--color-transparent-dark-smokey-gray-30);
		  --bg-gradient-color-start: var(--color-transparent-dark-smokey-gray);
		  --bg-gradient-color-mid: var(--color-transparent-dark-smokey-gray-40);
		  --bg-gradient-color-end: var(--color-transparent-dark-smokey-gray-0);
		}

		/* line 468, core/src/components/_feature-links.scss */
		.c-feature-link--smokey-gray:active .c-feature-link__content {
		  --bg-color: var(--color-transparent-dark-smokey-gray);
		  --bg-gradient-color-start: var(--color-transparent-dark-smokey-gray);
		  --bg-gradient-color-mid: var(--color-transparent-dark-smokey-gray);
		  --bg-gradient-color-end: var(--color-transparent-dark-smokey-gray);
		}

Back to top

Image-Based Feature Links

These are ideal when we have a hero image on the pages being linked to as we can use and crop the same photo, creating a subtle thread of continuity between the link and landing page.

Icons are optional for image-based feature links.

Featured Links (Default - Blue)

Code

<h2 class="visuallyhidden">Featured Links</h2>
<ul class="o-unstyled-list o-fixed-grid o-fixed-grid--two-up">
  <li class="c-feature-link__wrap">
     <a class="c-feature-link c-feature-link--blue" href="#0">
      <div class="c-feature-link__media">
	  	<img class="c-feature-link__image u-object-position-top" src="https://picsum.photos/id/937/800/200" alt="placeholder" />
	  	<div class="c-feature-link__image-overlay u-bg-black-overlay-20"><!-- image overlay --></div>
	  </div>
      <div class="c-feature-link__content">
        <span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
	  		<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
	  			<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
	  		</ouc:div>
	  	</span>
        <h3 class="c-feature-link__copy">Feature Link Copy</h3>
      </div>
     </a>
  </li>

  <li class="c-feature-link__wrap">
     <a class="c-feature-link c-feature-link--blue" href="#0">
      <div class="c-feature-link__media">
	  	<img class="c-feature-link__image u-object-position-top" src="https://picsum.photos/id/937/800/200" alt="placeholder" />
	  	<div class="c-feature-link__image-overlay u-bg-black-overlay-20"><!-- image overlay --></div>
	  </div>
      <div class="c-feature-link__content">
        <span class="svg-icon__wrap" style="--media-size: var(--size-2xl);">
	  		<ouc:div label="svg-icon-reggie-head" path="/_resources/assets/svg/svg-icon-reggie-head.svg">
	  			<?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/_resources/assets/svg/svg-icon-reggie-head.svg"); ?>
	  		</ouc:div>
	  	</span>
        <h3 class="c-feature-link__copy">Feature Link Copy</h3>
      </div>
     </a>
  </li>
 </ul>
/* line 39, core/src/components/_feature-links.scss */
.c-feature-link {
  --align-content: center;
  --align-items: center;
  --border-radius: var(--border-radius-default);
  --display: grid;
  --fg-color: var(--link-color-on-dark);
  --grid-areas: "overlay";
  --justify-content: center;
  --justify-items: start;
  --overflow: hidden;
  --place-content: var(--align-content) var(--justify-content);
  --place-items: var(--align-items) var(--justify-items);
  --text-decoration: none;
  --text-shadow: var(--text-shadow-on-dark);
  border-radius: var(--border-radius);
  color: var(--fg-color);
  display: var(--display);
  grid-template-areas: var(--grid-areas);
  place-content: var(--place-content);
  place-items: var(--place-items);
  text-decoration: var(--text-decoration);
  text-shadow: var(--text-shadow);
}

/* line 63, core/src/components/_feature-links.scss */
.c-feature-link:focus {
  --bg-color: var(--color-transparent-black);
  --link-focus-outline-color: black;
  --link-focus-outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-outline-color);
}

/* line 69, core/src/components/_feature-links.scss */
.c-feature-link:focus, .c-feature-link:hover, .c-feature-link:active {
  --fg-color: var(--link-color-on-dark);
}

/* line 74, core/src/components/_feature-links.scss */
.c-feature-link:focus .c-feature-link__content, .c-feature-link:hover .c-feature-link__content, .c-feature-link:active .c-feature-link__content {
  background-color: var(--bg-color);
}

/* line 81, core/src/components/_feature-links.scss */
.c-feature-link:focus .c-feature-link__image-overlay, .c-feature-link:hover .c-feature-link__image-overlay {
  --bg-overlay: var(--color-transparent-black-10);
}

/* line 85, core/src/components/_feature-links.scss */
.c-feature-link:focus .c-feature-link__content, .c-feature-link:hover .c-feature-link__content {
  --bg-color: var(--color-transparent-black-60);
}

/* line 90, core/src/components/_feature-links.scss */
.c-feature-link:focus .c-feature-link__copy::after, .c-feature-link:hover .c-feature-link__copy::after {
  transition: var(--transition-props) var(--transition-duration) var(--transition-timing) var(--transition-delay);
  transform: var(--transform);
}

/* line 98, core/src/components/_feature-links.scss */
.c-feature-link:active .c-feature-link__content {
  --bg-color: var(--color-transparent-black);
}

/* line 103, core/src/components/_feature-links.scss */
.c-feature-link::before, .c-feature-link::after {
  --display: none;
}

/* line 111, core/src/components/_feature-links.scss */
.c-feature-link[href^="http://"] .c-feature-link__copy::after, .c-feature-link[href^="https://"] .c-feature-link__copy::after {
  --content: var(--icon-external-link);
  --font-size: .625em;
  --inset-space-inline: var(--space-xs);
  transition: none;
}

/* line 123, core/src/components/_feature-links.scss */
.c-feature-link[href^="http://"]:hover .c-feature-link__copy::after, .c-feature-link[href^="http://"]:focus .c-feature-link__copy::after, .c-feature-link[href^="https://"]:hover .c-feature-link__copy::after, .c-feature-link[href^="https://"]:focus .c-feature-link__copy::after {
  --animation: var(--animation-quick-links-external);
  --transform: none;
  animation: var(--animation);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  /* line 137, core/src/components/_feature-links.scss */
  .c-feature-link:focus .c-feature-link__media, .c-feature-link:hover .c-feature-link__media {
    --transform: none;
  }
}

/* line 145, core/src/components/_feature-links.scss */
.c-feature-link > * {
  --grid-area: overlay;
  border-radius: var(--border-radius);
  grid-area: var(--grid-area);
}

/* line 153, core/src/components/_feature-links.scss */
.c-feature-link__media {
  --align-items: end;
  --display: grid;
  --grid-areas: "media-overlay";
  --size-block: 100%;
  --size-inline: 100%;
  --transition-duration: 200ms;
  --transition-props: transform;
  --transition-timing-function: cubic-bezier(.39, .575, .565, 1);
  align-items: var(--align-items);
  block-size: var(--size-block);
  display: var(--display);
  grid-template-areas: var(--grid-areas);
  inline-size: var(--size-inline);
  transition: var(--transition-props) var(--transition-duration) var(--transition-timing-function);
}

/* line 173, core/src/components/_feature-links.scss */
.c-feature-link__media > * {
  --grid-area: media-overlay;
  block-size: var(--size-block);
  border-radius: var(--border-radius);
  grid-area: var(--grid-area);
  inline-size: var(--size-inline);
}

/* line 183, core/src/components/_feature-links.scss */
.c-feature-link__image {
  --aspect-ratio: 4 / 1;
  --object-fit: cover;
  aspect-ratio: var(--aspect-ratio);
  object-fit: var(--object-fit);
}

@media only screen and (min-width: 960px) {
  /* line 183, core/src/components/_feature-links.scss */
  .c-feature-link__image {
    --aspect-ratio: 5 / 1;
  }
}

@media only screen and (min-width: 1440px) {
  /* line 183, core/src/components/_feature-links.scss */
  .c-feature-link__image {
    --aspect-ratio: 6 / 1;
  }
}

/* line 200, core/src/components/_feature-links.scss */
.c-feature-link__content {
  --align-items: center;
  --bg-gradient: linear-gradient(var(--bg-gradient-direction),
    var(--bg-gradient-color-start) var(--bg-gradient-stop-start),
    var(--bg-gradient-color-mid) var(--bg-gradient-stop-mid),
    var(--bg-gradient-color-end) var(--bg-gradient-stop-end)
  );
  --bg-gradient-color-start: var(--color-transparent-black);
  --bg-gradient-color-mid: var(--color-transparent-black-60);
  --bg-gradient-color-end: var(--color-transparent-black-0);
  --bg-gradient-direction: to right;
  --bg-gradient-position: left top;
  --bg-gradient-repeat: no-repeat;
  --bg-gradient-size: auto;
  --bg-gradient-stop-start: 0%;
  --bg-gradient-stop-mid: calc((100% / 3) * 2);
  --bg-gradient-stop-end: 100%;
  --display: flex;
  --gap-space: var(--space-md);
  --inset-space-block: var(--space-tight);
  --inset-space-inline: var(--space-comfy);
  --justify-items: start;
  --size-block: 100%;
  --size-inline: 100%;
  background: var(--bg-gradient) var(--bg-gradient-repeat) var(--bg-gradient-position)/var(--bg-gradient-size);
  block-size: var(--size-block);
  display: var(--display);
  gap: var(--gap-space);
  inline-size: var(--size-inline);
  padding: var(--inset-space-block) var(--inset-space-inline);
  place-items: var(--align-items) var(--justify-items);
}

/* line 235, core/src/components/_feature-links.scss */
.c-feature-link__copy {
  --block-space-end: 0;
  --font-size: var(--font-size-copy-2xl);
  --font-stack: var(--font-stack-display-sans);
  --font-weight: var(--font-weight-bold);
  --text-decoration: none;
  --transition-delay: var(--action-link-transition-delay);
  --transition-duration: var(--action-link-transition-duration);
  --transition-props: var(--action-link-transition-props);
  --transition-timing: var(--action-link-transition-timing);
  color: var(--fg-color);
  font-family: var(--font-stack);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  text-decoration: var(--text-decoration);
}

/* line 252, core/src/components/_feature-links.scss */
.c-feature-link__copy::after {
  --content: var(--icon-chevron-right);
  --display: inline-block;
  --font-size: .6em;
  --inline-space: -1ch;
  --inset-space-inline: var(--space-2xs);
  --text-decoration: none;
  --transform: var(--action-link-transform-after);
  --vertical-align: middle;
  --white-space: nowrap;
  content: var(--content);
  display: var(--display);
  font-size: var(--font-size);
  margin-right: var(--inline-space);
  padding-right: var(--inset-space-inline);
  padding-left: var(--inset-space-inline);
  text-decoration: var(--text-decoration);
  text-shadow: var(--text-shadow);
  transition: var(--transition-props) var(--transition-duration) var(--transition-timing) var(--transition-delay);
  vertical-align: var(--vertical-align);
  white-space: var(--white-space);
}

/* line 376, core/src/components/_feature-links.scss */
.c-feature-link--blue {
  --text-shadow: var(--text-shadow-on-dark-blue);
}

/* line 379, core/src/components/_feature-links.scss */
.c-feature-link--blue .c-feature-link__content {
  --bg-gradient-color-start: var(--color-transparent-blue);
  --bg-gradient-color-mid: var(--color-transparent-blue-60);
  --bg-gradient-color-end: var(--color-transparent-blue-0);
}

/* line 385, core/src/components/_feature-links.scss */
.c-feature-link--blue:focus {
  --link-focus-outline-color: var(--color-transparent-dark-blue);
}

/* line 391, core/src/components/_feature-links.scss */
.c-feature-link--blue:focus .c-feature-link__content, .c-feature-link--blue:hover .c-feature-link__content {
  --bg-color: var(--color-transparent-dark-blue-40);
  --bg-gradient-color-start: var(--color-transparent-dark-blue);
  --bg-gradient-color-mid: var(--color-transparent-dark-blue-60);
  --bg-gradient-color-end: var(--color-transparent-dark-blue-0);
}

/* line 400, core/src/components/_feature-links.scss */
.c-feature-link--blue:active .c-feature-link__content {
  --bg-color: var(--color-transparent-dark-blue);
  --bg-gradient-color-start: var(--color-transparent-dark-blue);
  --bg-gradient-color-mid: var(--color-transparent-dark-blue);
  --bg-gradient-color-end: var(--color-transparent-dark-blue);
}

Back to top