Logo

Logo: Block IOWA

Component Preview
<div class="logo">
    <a href="https://www.uiowa.edu">
        <div class="element-invisible">The University of Iowa</div>
        <svg xmlns="http://www.w3.org/2000/svg" class="logo-icon" aria-labelledby="logo" role="img" viewBox="0 0 311.6 90.2">
            <path class="st0" d="M40 18.8h-7.3v52.4H40v19H0v-19h7.3V18.8H0V0h40V18.8z" />
            <path class="st0" d="M93.8 90.2h-29c-10.5 0-17.4-6.9-17.4-18.2V18.2C47.4 7 54.4 0 64.8 0h29c10.5 0 17.4 7 17.4 18.2V72C111.2 83.2 104.2 90.2 93.8 90.2zM85.6 71.2V18.8H73v52.4H85.6z" />
            <path class="st0" d="M122.6 18.8h-6.4V0h38v18.9H147l6.5 43.4L167 0h19.2l14.4 62.3 5.2-43.4h-6.6V0h37.5v18.9h-6.2l-11.3 71.4h-30.6l-11.8-53.2 -12.1 53.1h-29.4L122.6 18.8z" />
            <path class="st0" d="M230.1 71.2h6.9L250.7 0h41l13.5 71.2h6.4v19H281l-2.9-22h-15.2l-2.7 22h-30L230.1 71.2 230.1 71.2zM276.5 51.7l-5.8-36.4 -6 36.4H276.5z" />
            <image src="../../images/uiowa-primary.png">
                <title id="logo">University of Iowa</title>
            </image>
        </svg>
    </a>
</div>
  • Content:
    .logo {
      display: block; }
    
    .logo--tab {
      height: 70px;
      width: 109px;
      padding: 25px 1.25rem;
      background: #151515; }
      .logo--tab a:focus svg {
        opacity: .5; }
      .search-is-open .logo--tab {
        visibility: none;
        opacity: 0; }
        @media (min-width: 855px) {
          .search-is-open .logo--tab {
            display: block;
            opacity: 1;
            visibility: visible; } }
      @media (min-width: 855px) {
        .logo--tab {
          width: 154px;
          height: 80px;
          padding: 25px; } }
      @media (min-width: 84.375em) {
        .logo--tab {
          width: 188px;
          height: 90px;
          padding: 23px 20px; } }
    
    .logo-icon {
      fill: #FFCD00;
      height: 20px; }
      @media (min-width: 855px) {
        .logo-icon {
          height: 30px; } }
      @media (min-width: 84.375em) {
        .logo-icon {
          height: 43px; } }
      .logo-icon:hover, .logo-icon:focus {
        opacity: 0.7; }
      .header--tertiary .logo-icon {
        margin-left: 0; }
        @media (min-width: 84.375em) {
          .header--tertiary .logo-icon {
            margin-top: 0; } }
    
  • URL: /components/raw/logo/logo.css
  • Filesystem Path: src/components/branding/logo/logo.css
  • Size: 1 KB
  • Content:
    @import '../../../assets/scss/variables';
    @import '../../../assets/scss/utilities';
    
    .logo {
      display: block;
    }
    
    .logo--tab {
      height: 70px;
      width:  109px;
      padding: 25px $gutter;
      background: $secondary;
    
      a:focus svg {
        opacity: .5;
      }
    
      // @todo Move this to search or search-toggle?
      .search-is-open & {
        visibility: none;
        opacity: 0;
    
        @include breakpoint(menu) {
          display: block;
          opacity: 1;
          visibility: visible;
        }
      }
    
      @include breakpoint(menu) {
        width: 154px;
        height: 80px;
        padding: 25px;
      }
    
      @include breakpoint(container) {
        width: 188px;
        height: 90px;
        padding: 23px 20px;
      }
    }
    
    .logo-icon {
      fill: $primary;
      height: 20px;
    
      @include breakpoint(menu) {
        height: 30px;
      }
    
      @include breakpoint(container) {
        height: 43px;
      }
    
      &:hover,
      &:focus {
        opacity: 0.7;
      }
    
      // @todo Move this to header.scss?
      .header--tertiary & {
        margin-left: 0;
    
        @include breakpoint(container) {
          margin-top: 0;
        }
      }
    }
    
  • URL: /components/raw/logo/logo.scss
  • Filesystem Path: src/components/branding/logo/logo.scss
  • Size: 1 KB