To examine the element, you have various options in most browsers.
For instance, in Chrome, by right-clicking on one of the card elements and choosing Inspect, you can open the DevTools panel to view the CSS properties of any element on the page.
Upon inspection, I noticed that the card-panel class has the following CSS rules:
.card-deck {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
margin-right: -15px;
margin-left: -15px;
}
Each nested card also contains its unique CSS style that needs to be replicated.
In addition, if you check the <head> section, you will find links to two CSS files:
https://www.portland.gov/sites/default/files/css/css_Nap32wA4jB85LBZMJhLbUh8juJthC1U6LI-74yu_d5Y.css
and
https://www.portland.gov/sites/default/files/css/css_z4fhgF_myzmhopAFzinwvvWR4bdcPakuk6TPD5OyoaY.css
You can copy these files to a code beautifier website like
After copying the files, search for the card-deck class in order to extract the relevant CSS styles. It appears that the second stylesheet is where you'll find the desired CSS:
This represents all the CSS related to cards that I uncovered through a quick examination of the stylesheet using the beautifier tool:
Note: You may not require all of this CSS depending on your project requirements.
(CSS Styles here...)