Contents

/**
 * GOV.UK Logo Component
 *
 * Based on the existing GOV.UK logo from the header in GOV.UK Template.
 *
 * Notes:
 *
 * - The printable-crown element is an image that is included when the page is
 *   printed. It's hidden for the screen media type, where the background image
 *   is used instead.
 *
 * Example Usage:
 *
 * <span class="govuk-logo">
 *   <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36">
 *   GOV.UK
 * </span>
 */

.govuk-logo {
  font-weight: bold;
  display: inline-block;

  @include screen {
    background-image: file-url('/images/gov.uk_logotype_crown.png');
    background-repeat: no-repeat;

    @include device-pixel-ratio {
      background-image: file-url('/images/gov.uk_logotype_crown-2x.png');
      background-size: 36px 32px;
    }

    @include media(tablet) {
      margin-right: 8px;
      background-position: 0 1px;
    }
  }
}

.govuk-logo__printable-crown {
  vertical-align: middle;
  margin-right: 1px;

  @include screen {
    visibility: hidden;
  }
}

Version data entries

21 entries across 21 versions & 2 rubygems

Version	Path
govuk_tech_docs-1.0.0	lib/assets/stylesheets/modules/_govuk-logo.scss