Create a stylish border around an ion-card using a sleek black bar

I have a card element with a title and subtitle, and I want to add a black bar above the header.

<ion-list>
    <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events">
      <ion-card-header>                                      
        <ion-card-subtitle>{{event.date}}</ion-card-subtitle>
        <ion-card-title style="font-size:15px" text-wrap>{{event.title}}</ion-card-title>
      </ion-card-header>                        
    </ion-card>
</ion-list>

This is my desired outcome:

Here's what I've accomplished so far:

htmlcssionic4

Answer №1

1- Ensure the card header padding is set to zero

2- Include a div as the first element in the card-header with a height greater than 0 and a black background color

View a sample result for the code below

<ion-list>
        <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events" >
          <ion-card-header style="padding: 0;">      
                <div style="height:15px;background:black;"></div>                  
            <ion-card-subtitle>{{event.date}}</ion-card-subtitle>
            <ion-card-title style="font-size:15px" text-wrap>{{event.title}}</ion-card-title>
          </ion-card-header>                        
        </ion-card>
    </ion-list>

Answer №2

This is the solution I came up with:

Simply add the following code snippet to the .scss file.

ion-card{
    border-top: 10px solid brown;        
}

ion-card-header{
    margin-left: -5px;
    margin-right: 00px;
    margin-top: -10px;
    margin-bottom: -10px;
}

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

Diverse positioning across various browsers

I have a navigation menu with alternating divs - one containing a menu link and the other a 'menu separator' div with a 2px wide 'separator bar' image. The width of the separator divs is set to 24px to create proper separations. For so ...

jquerycssbrowserdrop-down-menualignment

By using .innerHTML to create an element, the validation of HTML form fields can be circumvented

After inserting a form field with standard HTML validation constraints (pattern & required), using the .innerHTML property does not trigger validation. While I understand the difference between creating an element with .innerHTML and document.createElement ...

javascripthtmlvalidationinnerhtml

Display a single unique value in the dropdown menu when there are duplicate options

Hey there, I'm currently working on retrieving printer information based on their location. If I have multiple printers at the same location, I would like to only display that location once in the dropdown menu. I am aware that this can be resolved at ...

javascripthtmlasp.netangulartypescript

The stacking order of a child element within a parent element, which has a transform

Hey there, I've encountered a problem and was wondering if you could assist me with it. In the code snippet provided below, you'll see that there are elements with: transform: translate(0,0); Within these elements, there is a "dropdown" elemen ...

htmlcssz-indexcss-transforms

Change the location of an html td element with JavaScript

I am currently working on a simple JavaScript car racing game where the cars are represented by HTML table elements. I want to implement functionality where pressing the "e" key moves player one's car and the "d" key moves player two's car. This ...

javascripthtmlcss

Different ways to modify the CSS file of the bx-slider plugin for multiple sliders within a single webpage

Currently in the process of building a website using bx slider. I am looking to incorporate three sliders onto a single page for sliding HTML content. Initially, I added a bx slider to the page and customized it using CSS. I made modifications within jqu ...

javascriptjqueryhtmlcssbxslider

Create stunning HTML emails by incorporating a transparent background color behind images and text

Is there a way to add text on a transparent background layer placed over an image without using the background-image property? In my case, I am working on an HTML Emailer and must utilize the img tag instead. Any suggestions on how to achieve this? < ...

htmlcsshtml-table

Only apply the CSS filter alpha to the parent element and not its children

I am working on implementing an alert message box using HTML and CSS. Below is the code I have so far: <div class="dim" id="msg"> <div class="dialog_wrapper"> <div class="dialog" id="msg_value"></div> ...

cssfilteralpha

Struggling to get custom CSS to apply properly in Joomla 4 with Bootstrap 5 template

Having created a simple Bootstrap 5 template for my Joomla 4 website, I've been attempting to customize the navbar with CSS in my user.css file. However, it seems that the styles added in user.css are not being applied. I have verified that user.css ...

cssbootstrap-5joomla4

Issue with jQuery Master-Detail dropdown list selection

Having trouble isolating the code in this jsfiddle script. Despite my efforts, it seems that isolation is not working as expected and Firebug isn't showing any errors on the console: <!DOCTYPE html> <html lang="en"> <head> ...

javascriptjqueryhtml

align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment. Here is the link to the code: https://jsfiddle.net/r6ntxg2f/ If you look at the menu, you will notice that i ...

css

Adjusting Nested Divs based on the Content

One issue I'm facing is that the nested div ('content') isn't adjusting its height based on the actual content, specifically my form. The parent div adjusts its height but the child div doesn't. Any ideas on how to fix this? HTML: ...

csshtml

Is there a more efficient method for creating HTML with coffeescript / jQuery besides using strings?

Today marks my first attempt at creating a "answer your own question" post, so I hope I am on the right track. The burning question in my mind was, "Is there a more efficient way to generate HTML with jQuery rather than using tag strings?" My goal is to c ...

javascriptjqueryhtmlcoffeescript

The vertical and horizontal centering of linear gradients is causing them not to display

I'm having trouble with a background gradient not working properly after I centered the page both horizontally and vertically. Here is the code snippet: body { background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%); margin: 0; positi ...

htmlcss

Issue with updating input value during keyup event in Android Chrome specifically

Check out this straightforward jsfiddle: https://jsfiddle.net/gq9jga4q/33/ <input type="text" id="kbdhook" /> <div id="result" >1: </div> <div id="result2" >2: </div> <div id="result3" >3: </div> $('#kbdh ...

javascriptandroidjqueryhtmlgoogle-chrome

A fixed HTML div with a relative div is like having your own

I am in search of two divs with the following styles: <div style="height:20px;" /> <div style="height:100%;" /> These divs result in one being 20px tall and the other spanning 100% of the screen height, causing a vertical scrollbar that is eq ...

html

What is the process to transfer data from JavaScript to HTML within a Laravel environment?

I am attempting to transfer a value from JavaScript to HTML as a variable. In order to do this, I am retrieving the value from a Laravel PHP controller. JavaScript $("ul.nav-tabs > li > a").click(function() { var id = $(this).attr("href").repla ...

javascripthtmllaravel

Change the background color of the entire grid page to create a unique look

Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...

htmlcsscss-grid

Challenges with unique scrollbar designs and dynamic tab loading using AJAX

Hello to all amazing members of stackoverflow, I'm facing some major challenges getting my custom scrollbar to function properly with ajax-based tabs. Any assistance you can provide would be immensely helpful. I have most of it set up and operational ...

javascriptjqueryhtmlcssajax

Styling the topbar with CSS includes adding a vertical separator that neatly wraps the content within the

I recently created a website using HTML and CSS, featuring a topbar. However, I encountered an issue while trying to insert a vertical separator between some of the icons within the topbar. Initially, when I added the separator-div, only the first three ic ...

htmlcssimagecss-floatpseudo-element