Branding

Agency logo placeholder for the Header and Footer. Full Color and One Color Blue variants available.

WCAG 2.2 AA Reviewed April 2026

Full Color

Use on dark backgrounds such as the footer or hero area.

Agency Logo

View HTML

<div class="txds-branding txds-branding--full-color">
  <div class="txds-branding__circle">
    <span class="txds-branding__label">Agency Logo</span>
  </div>
</div>

One Color Blue

Use on light backgrounds where a subtle outline treatment is preferred.

Agency Logo

View HTML

<div class="txds-branding txds-branding--one-color">
  <div class="txds-branding__circle">
    <span class="txds-branding__label">Agency Logo</span>
  </div>
</div>

Small Variant

Compact version for use inside the footer or header.

Agency Logo

View HTML

<div class="txds-branding txds-branding--full-color txds-branding--sm">
  <div class="txds-branding__circle">
    <span class="txds-branding__label">Agency Logo</span>
  </div>
</div>

Usage Guidance

Replace the placeholder text with the actual agency logo:

<div class="txds-branding txds-branding--full-color">
  <div class="txds-branding__circle">
    <img src="/assets/images/agency-logo.svg" alt="Agency Name">
  </div>
</div>

CSS Classes

Class	Description
`txds-branding`	Base branding container (327 × 317px).
`txds-branding--full-color`	Full color variant — filled primary-50 circle with white text.
`txds-branding--one-color`	One-color blue variant — outlined circle with primary-60 text.
`txds-branding--sm`	Small size modifier (178 × 174px), for use in the footer.
`txds-branding__circle`	Circular container — paste the real agency logo SVG/image inside.
`txds-branding__label`	Placeholder text label (H2 semibold).