Semantic UI Card with image on the left

Question

Is it possible using Semantic UI Card have the image on the left? The documentation shows example where the image is always on the top. What i want to obtain is something like the Semantic UI Item (but of course i want use cards), like this:

What i want to obtain is something like this:

As you can see the image is on the left and it is something similar to a Semantic UI card.

Kiona

I think it is impossible with only Semantic UI css classes but I will be glad to see possible solution and use it for myself, that is why +1 – Bialy

Answer 1

The best you can do with semantic components would be this:

<div class="ui card" style="max-width: 100%; min-width: 100%;">
    <div class="content" style="padding: 0;">
        <div class="ui items">
            <div class="item">
                <div class="ui medium image">
                    <img src="https://semantic-ui.com/images/wireframe/image.png">
                </div>
                <div class="content" style="padding: 1rem;">
                    <a class="header">12 Years a Slave</a>
                    <div class="meta">
                        <span class="cinema">Union Square 14</span>
                    </div>
                    <div class="description">
                        <p></p>
                    </div>
                    <div class="extra">
                        <div class="ui label">IMAX</div>
                        <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="extra content">
        <a>
            More Info
        </a>
    </div>
</div>

I have changed the padding on the content but that's the only custom CSS used.

To get it to look exactly like your image you will need to make your own component/style it your self.

Forth