CODEWITHSUNDEEP
htmlcssfomantic-ui
h8jr
h8jr

Reputation: 1

How can I add a right ribbon label to a card using Fomantic UI?

I am brand new to Fomantic (and webdev in general) and I am trying to make a website that has a card with a ribbon label on the right side, like they have in the docs where they use a segment instead. However, when I mimic the code of the examples but with a card instead of a segment, it doesn't display properly, and it breaks the card block entirely. Other ribbon-less cards display fine.

Here's what I've got right now for the card that I want to have a ribbon:

<a class="ui large fluid card" href="blahblah">

<a class="ui right red ribbon label">Most coolest project</a>
                    <div class="content">
                        <div class="header">RL Stick-Shift Sim </div>
                        <div class="meta">
                            <span class="category">Summer 2023</span>
                        </div>
                        <div class="description">
                            <p>Project description blah blah.</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <div class="right floated author" >
                            <img class="ui avatar image" src="/images/github-pfp.jpg" alt="GitHub profile picture"> myGithub (GitHub)
                        </div>
                    </div>
                </a>

Does anyone have any ideas of how I might fix this? I have no idea what is wrong.

Upvotes: 0

Views: 66

Answers (1)

Shoaib Dev
Shoaib Dev

Reputation: 73

 <a class="ui large fluid segment" href="blahblah">

<a class="ui right red ribbon label">Most coolest project</a>
                    <div class="content">
                        <div class="header">RL Stick-Shift Sim </div>
                        <div class="meta">
                            <span class="category">Summer 2023</span>
                        </div>
                        <div class="description">
                            <p>Project description blah blah.</p>
                        </div>
                    </div>
                    <div class="extra content">
                        <div class="right floated author" >
                            <img class="ui avatar image" src="/images/github-pfp.jpg" alt="GitHub profile picture"> myGithub (GitHub)
                        </div>
                    </div>
                </a>

you are trying to use ribbon label with a card. Try to use as segment

Upvotes: 0

Related Questions