NCC Digital Design Guide

Sidebar And Related Content 

<div class="sidebar" role="complementary">
    <div class="block--guide">
        <h3 class="block__title">Back to</h3>
        <ol>
            <li><a href="#" title="link">Section title</a></li>
            <li><a href="#" title="link">Section title</a></li>
            <li><a href="#" title="link">Section title</a></li>
            <li><a href="#" title="link">Section title</a></li>
        </ol>
    </div>
    <div class="block">
        <h3 class="block__title">In this section</h3>
        <ul>
            <li><a href="#" title="link">Related link</a></li>
            <li><a href="#" title="link">Related link</a></li>
            <li><a href="#" title="link">Related link</a></li>
            <li><a href="#" title="link">Related link</a></li>
        </ul>
    </div>
    <div class="block">
        <h3 class="block__title">In another section</h3>
        <ul>
            <li><a href="#" title="link">Related link</a></li>
            <li><a href="#" title="link">Related link</a></li>
            <li class="active"><a href="#" title="link">Current link</a></li>
            <li><a href="#" title="link">Related link</a></li>
        </ul>
    </div>
</div>
 
<div class="sidebar" role="complementary">
	<div class="block--guide">
    	<h3 class="block__title">Back to</h3>
    	<ol>
    		<li><a href="#" title="link">{{ section-text }}</a></li>
    		<li><a href="#" title="link">{{ section-text }}</a></li>
    		<li><a href="#" title="link">{{ section-text }}</a></li>
    		<li><a href="#" title="link">{{ section-text }}</a></li>
    	</ol>
	</div>
	<div class="block">
    	<h3 class="block__title">In this section</h3>
    	<ul>
    		<li><a href="#" title="link">{{ related-text }}</a></li>
    		<li><a href="#" title="link">{{ related-text }}</a></li>
    		<li><a href="#" title="link">{{ related-text }}</a></li>
    		<li><a href="#" title="link">{{ related-text }}</a></li>
    	</ul>
	</div>
	<div class="block">
    	<h3 class="block__title">In another section</h3>
    	<ul>
    		<li><a href="#" title="link">{{ related-text }}</a></li>
    		<li><a href="#" title="link">{{ related-text }}</a></li>
    		<li class="active"><a href="#" title="link">{{ current-text }}</a></li>
    		<li><a href="#" title="link">{{ related-text }}</a></li>
    	</ul>
	</div>
</div>
 
{
  "section-text": "Section title",
  "related-text": "Related link",
  "current-text": "Current link"
}
  • Content: 
    .block{

	@include rem-fallback(margin-bottom, $base-font-size);

	ol,ul {
		margin-bottom: 0;
		list-style-type: none;
		margin-left: 0;
		padding-left: 0;
	}

  li {
    @include rem-fallback(margin-bottom, $base-font-size/2);

    &:last-child {
      margin-bottom: 0;
    }
    &.active {
    	a {
    		color: $brand-primary;
    	}
    	&:before {
    		content: 'ยป';
    		color: $brand-primary;
    		margin-right: .5em;

    	}
    }
  }
}

.block__title {
	margin-top: 0;
	border-bottom: 1px solid $brand-primary;
}
  • URL: /components/raw/sidebar-and-related-content/_sidebar-block.scss
  • Filesystem Path: src/patterns/patterns/sidebar-and-related-content/_sidebar-block.scss
  • Size: 528 Bytes
  • Handle: @sidebar-and-related-content
  • Preview:
  • Filesystem Path: src/patterns/patterns/sidebar-and-related-content/sidebar-and-related-content.hbs

There are no notes for this item.