KWLogo

A component to include various versions of the Keller Williams brand

Props

'informal' │ 'primary' │ 'command' │ 'connect' │ 'frontdoor' │ 'cloudmore' │ 'command-nogo' │ 'connect-nogo' │ 'frontdoor-nogo' │ 'cloudmore-nogo' │ 'settings-nogo'

required

className

String

forwardedRef

Custom

size

'small' │ 'medium' │ 'large'

'medium'

Examples

Primary

<div className="docs-inline-group">
  <KWLogo as="primary" size="large" />
  <KWLogo as="primary" />
  <KWLogo as="primary" size="small" />
</div><div className="docs-inline-group">
  <KWLogo as="primary" size="large" />
  <KWLogo as="primary" />
  <KWLogo as="primary" size="small" />
</div>

Informal

<div className="docs-inline-group">
  <KWLogo as="informal" size="large" />
  <KWLogo as="informal" />
  <KWLogo as="informal" size="small" />
</div><div className="docs-inline-group">
  <KWLogo as="informal" size="large" />
  <KWLogo as="informal" />
  <KWLogo as="informal" size="small" />
</div>

Command

<div className="docs-inline-group">
  <KWLogo as="command" size="large" />
  <KWLogo as="command" />
  <KWLogo as="command" size="small" />
</div>
<div className="docs-inline-group">
  <KWLogo as="command-nogo" size="large" />
  <KWLogo as="command-nogo" />
  <KWLogo as="command-nogo" size="small" />
</div><div className="docs-inline-group">
  <KWLogo as="command" size="large" />
  <KWLogo as="command" />
  <KWLogo as="command" size="small" />
</div>
<div className="docs-inline-group">
  <KWLogo as="command-nogo" size="large" />
  <KWLogo as="command-nogo" />
  <KWLogo as="command-nogo" size="small" />
</div>

Connect

<div className="docs-inline-group">
  <KWLogo as="connect" size="large" />
  <KWLogo as="connect" />
  <KWLogo as="connect" size="small" />
</div>
<div className="docs-inline-group">
  <KWLogo as="connect-nogo" size="large" />
  <KWLogo as="connect-nogo" />
  <KWLogo as="connect-nogo" size="small" />
</div><div className="docs-inline-group">
  <KWLogo as="connect" size="large" />
  <KWLogo as="connect" />
  <KWLogo as="connect" size="small" />
</div>
<div className="docs-inline-group">
  <KWLogo as="connect-nogo" size="large" />
  <KWLogo as="connect-nogo" />
  <KWLogo as="connect-nogo" size="small" />
</div>

FrondDoor

<div className="docs-inline-group">
  <KWLogo as="frontdoor" size="large" />
  <KWLogo as="frontdoor" />
  <KWLogo as="frontdoor" size="small" />
</div>
<div className="docs-inline-group">
  <KWLogo as="frontdoor-nogo" size="large" />
  <KWLogo as="frontdoor-nogo" />
  <KWLogo as="frontdoor-nogo" size="small" />
</div><div className="docs-inline-group">
  <KWLogo as="frontdoor" size="large" />
  <KWLogo as="frontdoor" />
  <KWLogo as="frontdoor" size="small" />
</div>
<div className="docs-inline-group">
  <KWLogo as="frontdoor-nogo" size="large" />
  <KWLogo as="frontdoor-nogo" />
  <KWLogo as="frontdoor-nogo" size="small" />
</div>

cloudMORE

<div className="docs-inline-group">
  <KWLogo as="cloudmore" size="large" />
  <KWLogo as="cloudmore" />
  <KWLogo as="cloudmore" size="small" />
</div>
<div className="docs-inline-group">
  <KWLogo as="cloudmore-nogo" size="large" />
  <KWLogo as="cloudmore-nogo" />
  <KWLogo as="cloudmore-nogo" size="small" />
</div><div className="docs-inline-group">
  <KWLogo as="cloudmore" size="large" />
  <KWLogo as="cloudmore" />
  <KWLogo as="cloudmore" size="small" />
</div>
<div className="docs-inline-group">
  <KWLogo as="cloudmore-nogo" size="large" />
  <KWLogo as="cloudmore-nogo" />
  <KWLogo as="cloudmore-nogo" size="small" />
</div>