---
name: Brand
menu: Components
route: /components/brand
---

import { Playground, Props } from 'docz'
import Brand from './'

# Brand

## Import
`import { Brand } from '@blasterjs/core'`

### Brand title
<Playground>
  <Brand
    color="textBase"
    title="Raster Foundry"
    href="#"
  />
</Playground>

### Brand image
<Playground>
  <Brand
    title="Raster Foundry"
    href="#"
    width="50px"
    px={1}
    py={1}
    mx={4}
    my={4}
    imagesrc="https://docs.rasterfoundry.com/assets/images/raster-foundry-logo.png"
  />
</Playground>

## PropTypes
| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| href |  string | yes | | |
| title |  string | yes | | |
| imagesrc |  string | no | | |
| color |  string | no | `link` | |
| colorFocus |  string | no | | |
| colorHover |  string | no | | |
| colorActive |  string | no | | |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `LAYOUT` | Style Prop |  |  | see [Style Props](/style-props) |
| `POSITION` | Style Prop |  |  | see [Style Props](/style-props) |
| `TYPOGRAPHY` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |

## Theming

### Schema
```
{
  colors: {
    color,
    colorFocus,
    colorHover,
    colorActive
  },
  fonts: {
    font
  },
  fontSizes: {
    fontSize
  },
  fontWeights: {
    fontWeight
  },
  overrides: css`
    ...
  `
}
```


- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/brand)
- [Learn more about themeing](/blaster-theme)