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>&nbsp;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>&nbsp;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>&nbsp;CCSS

    </a>

</h6>

<h6>

    <a href="hhttps://xyz.com/abc.pdf" target="_blank">

         <i class="material-icons">file_download</i>&nbsp;Florida BEST

    </a>

</h6>

<h6>

    <a href="https://xyz.com/abc.pdf" target="_blank">

        <i class="material-icons">file_download</i>&nbsp;Florida LAFS

    </a>

</h6>

<h6>

    <a href="https://xyz.com/abc.pdf" target="_blank">

        <i class="material-icons">file_download</i>&nbsp;TEKS

    </a>

</h6>

<h6>

Student Materials

</h6>

<h6>

    <a href="https://xyz.com/abc.pdf" target="_blank">      

<i class="material-icons">file_download</i>&nbsp;Student Achievement Certificate - Formal

</a>

</h6>

<h6>

    <a href="https://xyz.com/abc.pdf" target="_blank">      

<i class="material-icons">file_download</i>&nbsp;Student Achievement Certificate - Playful

</a>

</h6>

<h6>

    <a href="https://xyz.com/abc.pdf" target="_blank">

        <i class="material-icons">file_download</i>&nbsp;Student Notes Template (B&W)

    </a>

</h6>

<h6>

    <a href="https://xyz.com/abc.pdf" target="_blank">

        <i class="material-icons">file_download</i>&nbsp;Student Notes Template (Color)

    </a>

</h6>




<h6>

    <a href="https://xyz.com/abc.pdf" target="_blank">

        <i class="material-icons">file_download</i>&nbsp;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>&nbsp;XYZ Quick Guide

    </a>

</h6>

<h6>

    <a href="https://xyz.com/abc.pdf" target="_blank">

        <i class="material-icons">file_download</i>&nbsp;Lexile Levels

    </a>

</h6>

<h6>

    <a href="https://xyz.com/abc.pdf" target="_blank">

        <i class="material-icons">file_download</i>&nbsp;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

Comments

0 comments

Please sign in to leave a comment.

Didn't find what you were looking for?

New post