React UI Kit Compare

Created by © Ellen Langelaar 04-2021

Framework

Components

Button

Research

Layout

Content


          <Layout>
            <Layout.Header>Header</Layout.Header>
            <Layout.Content>Content</Layout.Content>
            <Layout.Footer>Footer</Layout.Footer>
          </Layout>
        
          <Layout>
            <Layout.Header>Header</Layout.Header>
            <Layout>
              <Layout.Sider>Sider</Layout.Sider>
              <Layout.Content>Content</Layout.Content>
            </Layout>
            <Layout.Footer>Footer</Layout.Footer>
          </Layout>
        
          <Layout>
            <Layout.Header>Header</Layout.Header>
            <Layout>
              <Layout.Content>Content</Layout.Content>
              <Layout.Sider>Sider</Layout.Sider>
            </Layout>
            <Layout.Footer>Footer</Layout.Footer>
          </Layout>
      
          <Layout>
            <Layout.Sider>Sider</Layout.Sider>
            <Layout>
              <Layout.Header>Header</Layout.Header>
              <Layout.Content>Content</Layout.Content>
              <Layout.Footer>Footer</Layout.Footer>
            </Layout>
          </Layout>

Grid

Doesn't seem to actually work..?

span=24

span=12

span=6


          <Row>
            <Col span={24}>span=24</Col>
          </Row>
          <Row>
            <Col span={12}>span=12</Col>
          </Row>
          <Row>
            <Col span={12}>span=12</Col>
          </Row>
          <Row>
            <Col span={6}>span=6</Col>
          </Row>
          <Row>
            <Col span={6}>span=6</Col>
          </Row>
          <Row>
            <Col span={6}>span=6</Col>
          </Row>
          <Row>
            <Col span={6}>span=6</Col>
          </Row>

Other

Some text


          <Divider>Some text</Divider>