PSU Shield SVGs

Below are HTML Widgets that include:

an inline SVG
- the shield
- the text
one or two Links
- psu.edu
- la.psu.edu
custom css
- SVG full-width of its parent
- invisible link text
- link width, fits over the appropriate width of the svg

Regarding the CLA marks

The two links’ widths are set as percentages of the container’s width, and the SVG is set to 100% of the container’s width; use the Column’s width or the HTML Widget’s Advanced > Positioning > Custom settings to set the width of the Mark and preserve the correct horizontal split for the two links between the shield and the text.

Example HTML widget content

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.53 92.84">
/* Lots and lots of SVG code */
</svg>

<a href="https://psu.edu" title="The Pennsylvania State University" class="psu-link">Penn State</a>
<a href="https://la.psu.edu" title="Penn State: College of the Liberal Arts" class="cla-link">Penn State: College of the Liberal Arts</a>

Example HTML widget custom css

selector svg {width:100%;}
selector a {
  font-size:0;
  color:transparent;
  position: absolute;
  display:inline-block;
  height:100%;
  overflow: hidden;
}
selector .psu-link {left:0; width:32%;}
selector .cla-link {right:0; width:68%;}