Logo

<div class="site-logo">
    <a href="#" title="Home" rel="home">
      <img src="/styleguide/img/svg/logo.svg" alt="Home"  />
    </a>
    <div class="site-name">
        <div>
            <p class="">City of Ghent Sitename</p>
        </div>
    </div>
</div>
<div class="site-logo">
    <a href="#" title="Home" rel="home">
      {% include '@image' with {
        'src': '/styleguide/img/svg/logo.svg',
        'alt_text': 'Home'
      } %}
    </a>
    <div class="site-name">
        <div>
          {% include '@paragraph' with {
            'text': 'City of Ghent Sitename'
          } %}
        </div>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    .site-logo {
      @include themify {
        .site-name div p::after {
          background: $section-background;
        }
      }
    
      height: 2rem;
      overflow: hidden;
    
      > a {
        float: left;
      }
    
      img {
        width: 5rem;
        height: 2rem;
        border-radius: 0;
      }
    
      .site-name {
        display: table;
        height: 100%;
    
        div {
          display: table-cell;
          vertical-align: middle;
    
          p {
            position: relative;
            margin: 0 0 0 .5rem;
            font-size: .8rem;
            font-weight: bold;
            line-height: 1rem;
    
            &::after {
              position: absolute;
              top: 1rem;
              right: 0;
              width: 33%;
              height: calc(100% - 2rem);
              padding-left: .3rem;
              content: '...';
              overflow: hidden;
            }
          }
        }
      }
    }
    
  • URL: /components/raw/logo/_logo.scss
  • Filesystem Path: components/31-molecules/logo/_logo.scss
  • Size: 785 Bytes

There are no notes for this item.