Branding

Branding is used to indicate that a user is interacting with Nulogy software.

import { Branding } from "@nulogy/components";

<Branding/>

Variations

The following variations are available on the Branding component. Variations can be combined for the desired state.

Lettermark

<Branding logoType="lettermark"/>

White

<Branding logoColor="white"/>

Large

<Branding size="large"/>

With subtext

Logo Subtext
<Branding subtext="Logo Subtext"/>

Alignment

Left Align
Center Align
Right Align
<Flex justifyContent="space-between">
  <Branding subtext="Left Align" alignment="left"/>
  <Branding subtext="Center Align" alignment="center"/>
  <Branding subtext="Right Align" alignment="right"/>
</Flex>

With Line

Logo Subtext
<Branding withLine alignment="center" subtext="Logo Subtext"/>

Props

NameTypeDefaultDescription

size

String

medium

Accepts medium or large to size the logo.

logoColor

String

blue

Accepts blue or white to set the logo color theme.

logoType

String

wordmark

Accepts wordmark or lettermark to set the logo type.

subtext

String

null

Subtext that is placed under the logo to specify the specific software product a user is interacting with.

withLine

Bool

false

Horizontal line around the subtext, subtext must be defined.

alignment

String

right

Accepts left, center, or right to align the logo and logo subtext.

className

String

undefined

className passed to the branding component.

Related components