College Design Language System

Side Navigation News

Side-Navigation-News Documentation

Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/navigation-standard.html

Implementation Notes

The Side-Navigation-News sidebar is intended to provide users with info related to the current news article they are reading. Utilized by subfolders within a college site (think internal department pages). For examples of correct usage of this component, please see: any of the News Page - Sidebar.

<!-- Side Navigation -->
<aside class="sidebar-news white-b-bg">
    <div class="sidebar-news-container">
        <h2 class="sidebar-news-title">Related News</h2>
        <ul class="related-news-items">
            <li class="related-news-link-icon"><a href="#link-1">Link to another related article or promoted news article a really long title for this one</a></li>
            <li class="related-news-link-icon"><a href="#link-2">Link to another related article or promoted news article</a></li>
            <li class="related-news-link-icon"><a href="#link-3">Link to another related article</a></li>
        </ul>
    </div>
    <div class="sidebar-news-container">
        <h2 class="sidebar-news-title">Learn More</h2>
        <div class="row align-items-center learn-more-item">
            <div class="col-3 image-thumbnail">
                <img alt-text="placeholder image" src="../../college-dls/college/images/News_Blog-1.png" />
            </div>
            <div class="col-9">
                <a href="#link-1">Link to College, Division, or Provost Initiative a really long title for this one</a>
            </div>
        </div>
        <hr />
        <div class="row align-items-center learn-more-item">
            <div class="col-3 image-thumbnail">
                <img alt-text="placeholder image" src="../../college-dls/college/images/News_Blog-1.png" />
            </div>
            <div class="col-9">
                <a href="#link-2">Link to College, Division, or Provost Initiative</a>
            </div>
        </div>
        <hr />
        <div class="row align-items-center learn-more-item">
            <div class="col-3 image-thumbnail">
                <img alt-text="placeholder image" src="../../college-dls/college/images/News_Blog-1.png" />
            </div>
            <div class="col-9">
                <a href="#link-3">Link to Provost Initiative</a>
            </div>
        </div>

    </div>
    <div class="sidebar-news-container">
        <h2 class="sidebar-news-title">Media</h2>
        <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/5s0HCWMXgRw?si&#x3D;d0CKtavWtv4N56wJ" title="UTSA Celebrate Teaching Week"></iframe>
        </div>
    </div>
    <div class="sidebar-news-container">
        <h2 class="sidebar-news-title">Follow Academic Affairs</h2>
        <div class="row align-items-center">
            <div class="col-2 social-media-icon text-center">
                <a href="https://www.facebook.com/people/UTSA-Academic-Affairs/61550596920839/?_rdr" aria-label="Facebook"><span class="fa-brands fa-facebook" aria-hidden="true"></span></a>
            </div>
            <div class="col-2 social-media-icon text-center">
                <a href="https://x.com/utsa_academics" aria-label="Twitter-X"><span class="fa-brands fa-x-twitter" aria-hidden="true"></span></a>
            </div>
            <div class="col-2 social-media-icon text-center">
                <a href="https://www.instagram.com/utsa_academics/" aria-label="Instagram"><span class="fa-brands fa-instagram" aria-hidden="true"></span></a>
            </div>
            <div class="col-2 social-media-icon text-center">
                <a href="https://www.youtube.com/@utsaacademicaffairs" aria-label="Youtube"><span class="fa-brands fa-youtube" aria-hidden="true"></span></a>
            </div>
            <div class="col-2 social-media-icon text-center">
                <a href="https://www.linkedin.com/school/the-university-of-texas-at-san-antonio/posts/?feedView&#x3D;all" aria-label="Linkedin"><span class="fa-brands fa-linkedin" aria-hidden="true"></span></a>
            </div>
        </div>

    </div>
    <div class="sidebar-news-container">
        <h2 class="sidebar-news-title">Follow Provost Heather Shipley</h2>
        <div class="follow-provost d-flex align-items-center pb-0">
            <span class="fab fa-linkedin"></span>
            <a href="https://www.linkedin.com/in/heathershipleyphd/" target="_blank" aria-label="Follow UTSA Provost">@HeatherShipleyPhD</a>
        </div>
    </div>
</aside>
<!-- End Side Navigation -->
  • Content: 
    /* components/03-sections/02-navigation/04-side-navigation-news/side-navigation-news.scss */
/* BEGIN side-navigation.scss */

.sidebar-news {
	background-color: $white;
	.sidebar-news-container {
		background-color: $white-b;
		border: 0.0625rem solid $grey;
		padding: 0.9375rem;
		margin-bottom: 0.9375rem;
		.sidebar-news-title {
			font-size: 1.125rem;
			font-weight: 900;
			margin-bottom: 1rem;
		}
		ul.related-news-items {
			list-style: none;
			padding-left: 1.25rem;
			margin-bottom: 0;
			li {
				text-indent: -0.9375rem;
				margin-bottom: 0.625rem;
				border-bottom: 1px solid $grey-b;
				padding-bottom: 1.125rem;
				&:last-child {
					margin-bottom: 0;
					border-bottom: 0;
					padding-bottom:0;
				}
				
				a {
					text-decoration: underline;
					font-weight: 600;
					font-size: 0.9375rem;
				}
			}
			li.related-news-link-icon:before {
				font-family: "Font Awesome 6 Pro";
				font-weight: 900;
				content: "\f101";
				margin-left: 0;
				font-size: 0.75rem;
				color: $orange-a11y;
				font-weight: bold;
				padding-right: 5px;
			}
			hr {
				margin-bottom: 0.625rem;
				margin-left: -1.25rem;
			}
		}
		.learn-more-item {
			margin-bottom: 0.9375rem;
			.image-thumbnail {
					padding-right: 0;
				}
			a {
				text-decoration: underline;
				font-weight: 600;
				font-size: 0.9375rem;
				padding-left: 0;
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
		.social-media-icon {
			a {
				color: $blue;
				font-size: 2rem;
			}
			a:hover {
				color: $orange-a11y;
				background-color: transparent;
			}			
		}
		.follow-provost {
			padding-bottom: 0.625rem;
			span.fab.fa-linkedin {
				font-size: 2rem;
				color: $blue;
				margin-right: 0.625rem;
			}
			a {
				text-decoration: underline;
				font-weight: 400;
				font-size: 0.9375rem;
				margin-bottom: 0.3125rem;
			}
		}
	}
}

/* Dark Mode - Side Navigation News */
@include color-mode(dark) {
	.sidebar-news {
		background: none;
		.sidebar-news-container {
			background-color: #151515;
			.sidebar-news-title {
				color:$white;
			}
			ul.related-news-items {
				li {
					border-bottom: 1px solid $grey-b;
					color:$white;
					&:last-child {
						margin-bottom: 0;
						border-bottom: 0;
						padding-bottom:0;
					}
					a {
						color: $white;
					&:hover {
						color: $blue;
					}
					}
				}
				li.related-news-link-icon:before {
					color: $orange;
				}
			}
			.learn-more-item {
				a {
					color: $white;
				&:hover {
					color: $blue;
				}
				}
			}
			.social-media-icon {
				a {
					color: $orange;
				}
				a:hover {
					color: $white;
				}			
			}
			.follow-provost {
				span.fab.fa-linkedin {
					color: $orange;
				}
				a {
					color: $white;
				&:hover {
					color: $blue;
				}
				}
			}
		}
	}
}

/* Dark Mode END */

/* END side-navigation-news.scss */
  • URL: /components/raw/side-navigation-news/side-navigation-news.scss
  • Filesystem Path: components/03-sections/02-navigation/04-side-navigation-news/side-navigation-news.scss
  • Size: 2.8 KB 
<!-- Side Navigation -->
<aside class="sidebar-news white-b-bg">
    {{!-- Related Stories Links --}}
    <div class="sidebar-news-container">  
        <h2 class="sidebar-news-title">Related News</h2>
            <ul class="related-news-items">
            {{#each related as |news|}}
                <li class="related-news-link-icon"><a href="{{ news.link }}" >{{ news.text }}</a></li>
            {{/each}}
            </ul>
    </div>
    {{!-- END Related Stories Links --}}
    {{!-- Learn More Links --}}
    <div class="sidebar-news-container">
        <h2 class="sidebar-news-title">Learn More</h2>
        {{#each learn as |story|}}
        <div class="row align-items-center learn-more-item">
            <div class="col-3 image-thumbnail">
                <img alt-text="placeholder image" src="{{ path story.image }}" />
            </div>
            <div class="col-9">
                <a href="{{ story.link }}">{{ story.title }}</a>
            </div>
        </div>
        {{#unless @last}}<hr/>{{/unless}}
        {{/each}}
    </div>
    {{!-- END Learn More Links --}}
    {{!-- Media --}}
    <div class="sidebar-news-container">
        <h2 class="sidebar-news-title">{{ media.heading }}</h2>   
        <div class="ratio ratio-16x9">
            <iframe src="{{ media.iframe }}" title="{{ media.title }}"></iframe>
        </div>
    </div>
    {{!-- END Media --}}
    {{!-- Social Media --}}
    <div class="sidebar-news-container">
        <h2 class="sidebar-news-title">Follow Academic Affairs</h2>
        <div class="row align-items-center">
            {{#each social as |icon|}}
            <div class="col-2 social-media-icon text-center">
                <a href="{{ icon.link }}" aria-label="{{ icon.label }}"><span class="{{ icon.class }}" aria-hidden="true"></span></a>
            </div>
           {{/each}}
        </div>
    
    </div>
    {{!-- END Social Media --}}
    {{!-- Follow --}}
    <div class="sidebar-news-container">
        <h2 class="sidebar-news-title">{{ follow.sidebar-news-title }}</h2>
        <div class="follow-provost d-flex align-items-center pb-0">
            <span class="fab fa-linkedin"></span> 
            <a href="{{ follow.link }}" target="_blank" aria-label="{{ follow.title }}">{{ follow.text }}</a>
        </div>
    </div>
    {{!-- END Follow --}}
</aside>
<!-- End Side Navigation -->