react-banners

React

rebass

Background

landing page dribbble landing page

Install

npm install --save react-banners

Usage

import React, { Component } from 'react'

import MyComponent from 'react-banners'

class Example extends Component {
  render() {
    return (
      <div style={{ overflow: 'hidden' }}>
        <Banners py={80} style={{ overflow: 'hidden' }}>
          <Banners.Blocks textWidth={'40%'}>
            <Banners.Block imageAlign="right">
              <Banners.Title></Banners.Title>
              <Banners.SubTitle></Banners.SubTitle>
              <Banners.Description my={30}>
                <Banners.Button color="rgb(128, 111, 193)">
                  
                </Banners.Button>
                <Banners.Button color="rgb(128, 111, 193)" ghost>
                  
                </Banners.Button>
              </Banners.Description>
              <Banners.Image
                width={'33.5%'}
                src="//img.alicdn.com/tfs/TB1nchIg4jaK1RjSZKzXXXVwXXa-390-419.svg"
              />
            </Banners.Block>
          </Banners.Blocks>
          <Banners.Texture
            style={{
              width: '100%',
              height: '100%',
              backgroundRepeat: 'no-repeat',
              transform: 'scale(2.5)',
              backgroundSize: 'cover',
              backgroundPosition: '50%',
              backgroundImage:
                'url(//img.alicdn.com/tfs/TB1gqwCgSzqK1RjSZFjXXblCFXa-1141-1259.svg)'
            }}
          />
        </Banners>
      </div>
    )
  }
}

API

<Banners>


rebass	any	https://rebassjs.org/props
style	object	`{color:"#eee"}`
children	`<Blocks>/<Cards>/<Texture><Box>`

<Banners.Box>


rebass	any	https://rebassjs.org/props
style	object	`style={{color:"#eee"}}`
children	any

<Banners.Blocks>


rebass	any	https://rebassjs.org/props
style	object	`style={{color:"#eee"}}`
imageWidth	Number/String	`imageWidth="40%"`
imageAlign	left/top/right/bottom	`imageAlign="top"`
textWidth	Number/String	`textWidth="40%"`
textColor	String	`textColor="#eee"`
children	`<Block>`

<Banners.Block>


rebass	any	https://rebassjs.org/props
style	object	`{color:"#eee"}`
href	string	`href="//taobao.com"`
children	`<Title>/<SubTitle>/<Description>`

<Banners.Cards>


rebass	any	https://rebassjs.org/props
style	object	`style={{color:"#eee"}}`
imageWidth	Number/String	`imageWidth="40%"`
imageAlign	left/top/right/bottom	`imageAlign="top"`
textWidth	Number/String	`textWidth="40%"`
textColor	String	`textColor="#eee"`
children	`<Card>`