Net7 UI Kit

Logo component: Main 

<div class="n7-site-logo site-logo flex n7-logo--main">
    <img class="w-full h-full object-contain object-left-top" src="/images/logo.png" alt="Alt logo image" width="248" height="81" />
</div>
 
{% extends '@logo' %}
{% block classes %}{{ super() }} n7-logo--main{% endblock classes %}
 
{
  "alt": "Alt logo image",
  "path": "/images/logo.png",
  "width": 248,
  "height": 81,
  "objectFit": "object-contain"
}

Logo component.

Logo sizes are defined via css, and with size attribute (width and height) in the img tag.\

Variants

  • logo–main: main logo - used in the header
  • logo–secondary: secondary logo - used in the header

Configurations (for development):

  • href: value - if logo is wrapped in link (else, wrapper is a div)
  • classes: value - style classes
  • size: value - size classes
  • srcset: value - logo img srcset attribute value for responsive variants
  • objectFit: value - set object-fit property on image (cover or contain)
  • path: value - logo path
  • alt: value - logo alt
  • width: value - logo img width attribute value
  • height: value - logo img height attribute value

Blocks

  • classes