Design System

Breadcrumbs 

<div class="Breadcrumbs">
    <div class="Breadcrumbs__nav">
        <ul>
            <li>
                <a href="/">Home</a>
            </li>
            <li><a href="https://new-ascend-dev.5thring.co.uk/products-brands">Products &amp; Brands</a></li>
            <li><a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals">Specialty Chemicals</a></li>
            <li><a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines">FlexaTram™ – Amines</a></li>
        </ul>
    </div>
    <a href="javascript:window.print()" class="Button Button--icon Button--print"><span>Print this page</span></a>
</div>
 
<div class="Breadcrumbs">
	<div class="Breadcrumbs__nav">
        <ul>
            <li>
				<a href="/">Home</a>
			</li>
			<li><a href="https://new-ascend-dev.5thring.co.uk/products-brands">Products &amp; Brands</a></li>
			<li><a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals">Specialty Chemicals</a></li>
            <li><a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines">FlexaTram™ – Amines</a></li>
		</ul>
    </div>
	<a href="javascript:window.print()" class="Button Button--icon Button--print"><span>Print this page</span></a>
</div>
 
{
  "company": "Ascend Performance Materials",
  "url": "https://www.ascendmaterials.com",
  "placeholders": {
    "copy": "Cozy lummox gives smart squid who asks for job pen"
  }
}
  • Content: 
    .Breadcrumbs {
  @apply flex
    justify-between
    items-center;

  &__nav {
    @apply w-[85%]
      lg:w-[75%];
  }
  ul {
    @apply inline-block 
      xl:pb-1
      xl:pb-2
      uppercase  
      xl:border-b-green 
      xl:border-b-2 
      xl:border-solid;
  }

  li {
    @apply inline-block 
      text-blue
      font-bold;

    &:not(:last-child):after {
      @apply content-empty
        inline-block 
        w-[11px]
        h-[19px]
        mx-1
        sm:mx-3
        md:mx-6
        -mb-1 
        bg-chevron-right
        bg-cover 
        bg-center  
        bg-no-repeat;
    }

    &.Breadcrumbs__here {
      @apply text-black;
    }
  }

  .Button {
    @apply -mt-2
      py-4
      md:max-lg:py-12;

    span {
      @apply max-lg:hidden;
    }
  }
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.scss
  • Filesystem Path: src/components/01-elements/breadcrumbs/breadcrumbs.scss
  • Size: 780 Bytes

No notes defined.