Raptus Design Theme

3.4.4 #Molecules.Miscellaneous.Card Title Card Title

Examples

Default styling

Listing-Title

Main Line Second Line

Second Line Main Line

Listing-Title

Main Line Second Line

large

Large

Listing-Title

Main Line Second Line

Second Line Main Line

Listing-Title

Main Line Second Line

small

Small

Listing-Title

Main Line Second Line

Second Line Main Line

Listing-Title

Main Line Second Line

left-zero

Zero left and right padding

Listing-Title

Main Line Second Line

Second Line Main Line

Listing-Title

Main Line Second Line

Markup

<div class="card-title card-title--[modifier class]">
    <h4 class="card-title__title">Listing-Title</h4>
</div>
<div class="card-title card-title--two-lines card-title--[modifier class]">
    <h4 class="card-title__title">Main Line <small>Second Line</small></h4>
</div>
<div class="card-title card-title--two-lines card-title--alternate card-title--[modifier class]">
    <h4 class="card-title__title"><small>Second Line</small> Main Line</h4>
</div>
<div class="card-title card-title--icon card-title--[modifier class]">
    <h4 class="card-title__title icon icon-star-outline">Listing-Title</h4>
</div>
<div class="card-title card-title--icon card-title--two-lines card-title--[modifier class]">
    <h4 class="card-title__title icon icon-star-outline">Main Line <small>Second Line</small></h4>
</div>

Source: assets/styles/03-molecules/04-miscellaneous/_card-title.scss, line 1