0

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.

h8jr
  • 1

1 Answers1

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

Shoaib Dev
  • 71
  • 6
  • I am looking for a way to add a ribbon without using a segment, because my webpage is a bunch of cards. Are you saying that there is no way to do this? – h8jr May 29 '23 at 03:19