CODEWITHSUNDEEP
reactjssemantic-uisemantic-ui-react
James Delaney
James Delaney

Reputation: 1776

How to create a card in Semantic UI React?

I want to make a grid and organize the items in the card like that:

enter image description here

Here is what I have done so far:

<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>

However, the result is not quite what I want:

enter image description here

How to orginize this card block?

Upvotes: 0

Views: 1599

Answers (1)

Lazar Nikolic
Lazar Nikolic

Reputation: 4394

Wouldn't it be better just to use card for that and not grid

<Card>
  <Card.Content>
    <Card.Header style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
      <div>Church Mutual Worker's Compensation Claim</div>
      <div>#ID-1234567</div>
    </Card.Header>
    <Card.Meta style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
      <p>
        Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
        <span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
      </p>
      <Button color="red" size="mini" content="Urgent" />
    </Card.Meta>
  </Card.Content>
</Card>

After this, you just need to add some style in order to make it look more like you want. Also, I suggest using className instead of inline styles. It is better for rendering and makes your code more readable.

Upvotes: 1

Related Questions