Cards

The .ui-basic-card class includes the style applied to cards elements.

If you need to modify this element globally, use the _cards.scss file. IF NOT, overwrite styles using the stylesheet of each page.

The following properties and variables can be used to create UI variations:

CSS property Description
background: $white-color; set body background color to white
box-shadow: $section-box-shadow; Apply DropShadow to the cards container. You can use .b-shadow helper class.
HE-MAN AND SKELETOR FACTS
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis explicabo quia temporibus voluptatum in provident eaque. Delectus, magnam totam dolorum suscipit iste perferendis, exercitationem deserunt eaque nisi sequi unde eius. Earum dignissimos blanditiis illum illo vero a tempora laborum repellat, ex cupiditate hic inventore provident necessitatibus vel et! Reiciendis voluptate saepe id, aspernatur quo accusamus quis aliquid veritatis laudantium qui. Magnam nihil ullam unde, quis optio voluptatem ab? Accusantium sed culpa dolores animi iste aut sequi earum magnam cumque, at, placeat non iusto ex dolore obcaecati quia quisquam nam corrupti! 

        
            <div class="ui-basic-card">
                <div class="card--title scorecart-title">
                    Title
                </div>
                <div class="card--body">
                   Content
                </div>
            </div>
TITLE
20%
YES
25
NO
56
N/A
76 

        
            <div class="crn-filter-wrapper">
                <label class="form-checkbox-container ">
                    <input type="radio" name="test" value="yes"/>
                    <div class="checkmark"></div>
                    <span>Radio Option 1</span>
                </label>
            </div>
            <div class="crn-filter-wrapper">
                <label class="form-checkbox-container ">
                    <input type="radio" name="test" value="yes"/>
                    <div class="checkmark"></div>
                    <span>Radio Option 2</span>
                </label>
            </div>