What is the process for attaching a right ribbon label onto a card in Fomantic UI components?

I am completely new to Fomantic (and web development in general) and I'm attempting to create a website featuring a card with a ribbon label on the right side. I saw similar designs in the documentation where they used a segment instead. However, when I try to replicate the code from those examples but with a card instead of a segment, it doesn't render correctly and ends up breaking the entire card layout. Other cards without ribbons display properly.

Here's the current code I have for the card that I intended to include 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>

Is there anyone who might have suggestions on how to solve this issue? I'm completely lost as to what could be causing the problem.

htmlcssfomantic-ui

Answer №1

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

<a class="ui right red ribbon label">Most amazing 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>

Using a ribbon label with a card is not recommended, try utilizing it as a segment instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to turn off Bootstrap links hover background color?

I recently added a Bootstrap menu to my website that I'm currently working on. I am curious about how to disable the hover background color for Bootstrap links. Here's the situation: Below is an example of the menu I implemented: Currently, whe ...

htmlcsshyperlinkhoverbackground-color

Creating a variety of Flexslider slideshows on the fly

Check out this snippet of code: <?php foreach ($objVideos as $objVideo) : ?> jQuery('#carousel-<?php echo $objVideo->id; ?>').flexslider({ animation: "slide", controlNav: false, animationLoop: false, ...

javascriptjqueryhtml

Dynamic styles object for React components with inline styles

I have a styles object let styles = { step_div:{ height:'150px', } } I'm trying to display multiple div elements with different colors using React class Layout extends React.Component{ constructor(props) { super(props); ...

javascripthtmlcssreactjsinline

Concealing Bootstrap 3 elements on a split-screen layout

I encountered a peculiar issue with Bootstrap 3. When I resize my browser width to half the screen, there is a slight 1px threshold where both "hidden-xs" and "hidden-sm" elements become visible simultaneously. Is there a way to fix this so that only one o ...

csstwitter-bootstraptwitter-bootstrap-3

Is it possible to automatically set focus on the input box in an html tag multiple times instead of just once with autofocus?

Currently, I am developing an online editor that allows users to quickly edit individual words. My approach involves replacing specific words with input boxes containing the word for direct editing by users. In order to streamline the process and ensure e ...

javascripthtmlangular

Unusual styling: Unexpected CSS :after impact on card layouts in Bootstrap 4

I'm currently utilizing a Bootstrap 4 masonry card layout for a particular project, and within this project, there is a <select> element that has been styled with custom CSS properties. One of the customized styles includes a caret created using ...

csstwitter-bootstraptwitter-bootstrap-4column-count

Is there a different way to retrieve the tag name of an element besides using

Currently, I am dealing with an outdated version (Chromium 25) of chromium. My goal is to utilize the tagName method in order to retrieve the name of the specific HTML tag being used. While I am aware that Element.tagName functions for versions 43 and ab ...

javascripthtmltypescriptchromium

Utilize jQuery to create a dynamic image swapping and div showing/hiding feature

I'm having trouble implementing a toggle functionality for an image and another div simultaneously. Currently, when the image is clicked, it switches to display the other div, but clicking again does not switch it back. Can someone please advise on wh ...

javascriptjqueryhtmlcss

Currently, my main focus is on finding a solution to adjusting the background color of the div element named *topnav* to properly match the width of the

I'm having trouble adjusting the width of the topnav background color to fill the entire page without any gaps. I hope that makes sense. Let me know if you need more information. Page displaying gap: Here is the HTML and CSS code: body {background ...

htmlcss

Triggering the hidden radio button with an OnClick event

I am using the Bootstrap framework to design my user interface. I have a specific requirement where I need to display multiple buttons that function as radio buttons. <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary a ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-3

What is the best way to choose all elements except for <body>? Alternatively, how can <body> be styled to its default appearance?

Web browsers often apply default styles to different elements, but users have the option to override these defaults using custom stylesheets. I personally like to customize these default styles with my own, for example: * {padding:0; margin:0; } However ...

csscss-selectorsuserstyles

The vertical-align property in CSS fails to function properly when applied to specific rows or columns within the

Hello, I have been experimenting with table attributes and came across the valign attribute. However, I encountered some cells that were not affected by it. So, I decided to try CSS vertical-align instead. To my surprise, some cells were affected while oth ...

htmlcss

Navigating across various iFrames with the help of XPath and C#

Trying to extract a data element from a table that is nested within two iframes. These frames are displayed like this: <iframe id="appContent" frameborder="0" name="appContentFrame" src="/controller.aspx" style="height: 0px; width: 1319px;"> ...

c#htmliframexpathselenium-webdriver

Use ajax request to serialize input into HTML value

I implemented a jquery.ajax post request to send data to the server using C#, however, I encountered an error with my code. Here is the code snippet: $(function(){ $('#frmSubmit').on('submit', function(e){ e.preventDefault(); ...

javascriptc#jqueryhtmlajax

Executing JavaScript Code Through Links Created Dynamically

I am currently developing a website with a blog-style layout that retrieves information from a database to generate each post dynamically. After all posts are created, the header of each post will trigger an overlaid div displaying the full article for tha ...

javascriptphpjqueryhtmlcss

Looking for a drum set with clickable buttons? Having trouble changing the background color in CSS/HTML? Wondering how to map keyboard keys to HTML buttons?

Behold my HTML creation: <H1> <center> EPIC GUITAR JAM </center> </H1> <img class="guitar" src="guitar.jpg" /> <button class="strum" onclick="Strum()"> Strum Chord </button> <button class="pluck" o ...

javascripthtmlcsskeyboardbackground-color

The Ajax request is displaying the URL instead of the expected posted data

Here is the html code along with JavaScript that I am working on: <div id="input_form"> <fieldset> <form id="myform" method="post" action=""> seq: <input type="text" name="seq" id = "seq"><br><br> ...

pythonhtmlajaxflask

Bug allows unauthorized access to password in Bootstrap Password Revealer

Whenever I try to reveal a Bootstrap password using the eye button, my PC freezes. Strangely, an input is automatically added even though there are no codes for it. This auto-increasing input causes my browser to hang and eventually crashes my entire PC. C ...

javascriptjqueryhtmlcsstwitter-bootstrap

Discovering a particular string within a jQuery array object: Tips and tricks

One thing that is confusing me is the jQuery array object. To explain further: I have two arrays, one called brandsLink and the other called floorLink. When a user clicks on a link, I am saving the brand name in a variable called brandName, and then checki ...

javascriptjqueryhtmlcss

I require an HTML <select multiple> element that includes a disabled option

Can anyone help me figure out how to create a multi-select box with a disabled element? I want the box to have the following options: All ----or---- option 1 option 2 I don't want the "----or----" option to be selectable. Here's the code I&a ...

htmlselect