如何在语义UI React中创建卡?

时间:2018-09-14 08:32:16

标签: reactjs semantic-ui semantic-ui-react

我想建立网格并像这样组织卡片中的项目:

enter image description here

这是我到目前为止所做的:

<Grid stackable style={{border: '1px solid lack;'}}>
  <Grid.Row>
    <Grid.Column width={7}>
      <Header
         style={{ padding: '10px' }}
         as="h3"
         color={headerColor}
         textAlign="left"
         content="Church Mutual Worker's Compensation Claim"
         />
    </Grid.Column>
    <div style={{marginTop: '0px'}}>#ID-1234567</div>
  </Grid.Row>

  <Grid.Row>
    <Grid.Column width={7}>
      <p>
        Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
        <span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
      </p>
    </Grid.Column>
    <Grid.Column width={5}>
      <Form.Button color="red" size="mini" content="Urgent" />
    </Grid.Column>
  </Grid.Row>
</Grid>

但是,结果并不是我想要的:

enter image description here

如何设置此卡片块?

0 个答案:

没有答案