CODEWITHSUNDEEP
csssemantic-uisemantic-ui-css
msalafia
msalafia

Reputation: 2743

Semantic UI Card with image on the left

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:

enter image description here

What i want to obtain is something like this:

enter image description here

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

Upvotes: 6

Views: 2747

Answers (1)

Sean
Sean

Reputation: 1464

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.

Upvotes: 4

Related Questions