0.1.3 • Published 6 years ago
Peak Design
Components
SocialIcon:
Example
import React from 'react'
import { SocialIcon } from 'peak-design'
export default class Footer extends React.Component {
renderSocialIcons() {
const icons = [
{ name: 'twitter', url: 'https://twitter.com/LOUassistant?lang=en' },
{ name: 'linkedin', url: 'https://www.linkedin.com/company/lou-assistant' },
{ name: 'youtube', url: 'https://www.youtube.com/channel/UCCiCE0DwqFplf6SV2MhT4SA' }
]
return icons.map(icon => {
return (
<SocialIcons
key={icon.name}
url={icon.url}
color="#888"
hovColor="rgb(59,200,200)"
width={35}
height={35}
marginRight={5}
marginLeft={5}
/>
)
})
}
render() {
return <div>{this.renderSocialIcons()}</div>
}
}
Properties
Property | Type |
---|
url | string |
color | color |
hoverColor | color |
width | int |
height | int |
marginLeft | int |
marginRight | int |
WhiteSpace
Example
import React from 'react'
import { WhiteSpace } from 'peak-design'
export default class Heading extends React.Component {
render() {
return (
<div>
<h1>Title</h1>
<WhiteSpace height={20} />
<p>Description</p>
</div>
)
}
}
Properties
Property | Type | Default |
---|
orientation | string | 'vertical' |
height | int | null |
width | int | null |
backgroundColor | color | transparent |