Semantic-UI-React: Card header with 2 columns

Question

I want the card header to be the normal text together with an image, side by side.

  import logo from './images/logo.svg';

  render() {
    return (
      <div>
        <Card>
          <Card.Content className='left aligned'>
            <div className="two column headers">
              <Card.Header>Hello World!</Card.Header>
              <Image src={logo} size='tiny'/>
            </div>
            <Card.Meta>Item</Card.Meta>
            <Card.Meta>Category</Card.Meta>
          </Card.Content>

          <Card.Content>
            <Card.Description>10 units of test.</Card.Description>
          </Card.Content>
        </Card>    
     </div>
    );

The image is appearing just after the 'Hello World!' header. How can I put them side by side, left aliging the text and right aligning the image ?

Oleksandr Fediashov · Accepted Answer · 2017-06-18 07:40:56Z

1

You can do this with CSS, however I will recomend to use Grid there.

<Card.Header>
  <Grid>
    <Grid.Column width={12}>Hello World!</Grid.Column>                
    <Grid.Column width={4}>
      <Image src={logo} size='tiny'/>
    </Grid.Column>
  </Grid>
</Card.Header>

By the way, if you want to have an Image component on left, you can use Header component, see examples.

answered Jun 18, 2017 at 7:40

Oleksandr Fediashov

4,3351 gold badge26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Semantic-UI-React: Card header with 2 columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related