Resource Center Code Sandbox Module - Examples with multiple URL links
The Resource Center provides a Code Sandbox Module that allows for free form creation of content via HTML/CSS/Javascript panels. Here are a few examples of Sandbox Modules we created to offer customers links to external sites and downloads. Images and code examples below. Notes: you may have to adjust the CSS to play nicely with the fonts in your particular app. We used Google fonts for the icons.
External Links
HTML
<br><br>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
</head>
<h5>
<a href="https://university.xyz.com/" target="_blank"><i class="material-icons">open_in_new</i> XYZ University</a>
</h5>
<h6>
Browse professional learning courses to learn more about XYZ products
</h6>
<hr><h5>
<a href="https://www.xyz.com/webinars" target="_blank"><i class="material-icons">open_in_new</i> Webinars</a>
</h5>
<h6>
Sign up for a live webinar or view recorded webinars on-demand
</h6>
CSS
h5 {
padding-left: 40px;
padding-right: 40px;
padding-bottom: 0px;
text-transform: none;
font-family:arial;
font-size:18px;
}
h6 {
padding-left: 40px;
padding-right: 40px;
padding-bottom: 5px;
color: #737373;
text-transform: none;
font-family:arial;
font-size:16px;
}
hr.top {
display: block;
color: #bbbbbb;
margin-left: 0px;
margin-right: 0px;
border-style: inset;
border-width: 0.5px;
}
hr {
display: block;
color: #bbbbbb;
margin-left: 40px;
margin-right: 40px;
border-style: inset;
border-width: 0.5px;
}
.material-icons {
vertical-align: middle; /*Change this to adjust the icon*/
}
Download Links
HTML
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
</head>
<br>
<h6>
Standards Correlations
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> CCSS
</a>
</h6>
<h6>
<a href="hhttps://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> Florida BEST
</a>
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> Florida LAFS
</a>
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> TEKS
</a>
</h6>
<h6>
Student Materials
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> Student Achievement Certificate - Formal
</a>
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> Student Achievement Certificate - Playful
</a>
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> Student Notes Template (B&W)
</a>
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> Student Notes Template (Color)
</a>
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> Student Session Tracker
</a>
</h6>
<h6>
Teacher Materials</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> XYZ Quick Guide
</a>
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> Lexile Levels
</a>
</h6>
<h6>
<a href="https://xyz.com/abc.pdf" target="_blank">
<i class="material-icons">file_download</i> Lesson Planner
</a>
</h6>
<br>
CSS
h6 {
padding-left:30px;
padding-right: 30px;
padding-bottom: 5px;
padding-top: 0px;
color: #737373;
text-transform: none;
font-family: arial;
font-size:16px;
}
.material-icons {
vertical-align: middle;
}
6
コメント
this is great! QQ...how did you change the color of the icons? I dont see it in the css
Hey Eric. 2 years later, but hoping you can help. Ive been chasing this tail for a week now and stumbled across this post. I did it just like your code, and I tried creating my own, but neither version works. Clicking on a link just does noting and closes the RC. Is there a JS component Im missing?
サインインしてコメントを残してください。