7.2 #permalink Options Card

Toggle example guides Toggle HTML markup

A card with a title, space for information, and some buttons below it, used so far for wayfinding / disambiguation. It rises a bit out of its container on purpose

Examples
Default styling
ggPrimary1
primary1
ggPrimary2
primary2
ggPrimary3
primary3
Markup
<div class="col_defaultBg box_padded2">
<div class="optionsCard optionsCard_[modifier class] grid-12 grid-md-4 box_horizontalPadded1 box_bottomPadded6 box_md_bottomPadded0 layout_center">
   <h2 class="optionsCard-title text_title text_fontSizeLarger box_verticalPadded1 col_whiteText"><a class="col_inherit" href="www.google.com">Title</a></h2>
   <div class="triangle-parent">
      <div class="triangle triangle_small triangle_bottom triangle_[modifier class]"></div>
   </div>
   <div class="optionsCard-body col_white box_horizontalPadded4 box_verticalPadded3">
      <p class="box_bottomPadded2 js-equalHeight">
         Put some text here
      </p>
      <a class="btn btn_simple btn_transparent btn_[modifier class] box_bottomMargin2" href="www.google.com">Learn More</a>
   </div>
   <a class="optionsCard-option box_verticalPadded1 layout_rel" href="www.google.com">
      <span class="optionsCard-optionText text_fontSizeSmall col_defaultText">
         Link 1
      </span>
   </a>
   <a class="optionsCard-option box_verticalPadded1 layout_rel" href="www.google.com">
      <span class="optionsCard-optionText text_fontSizeSmall col_defaultText">
         Link 2
      </span>
   </a>
   <a class="optionsCard-option box_verticalPadded1 layout_rel" href="www.google.com">
      <span class="optionsCard-optionText text_fontSizeSmall col_defaultText">
         Link 3
      </span>
   </a>
</div>
</div>
Source: modules/07_large_elements/optionsCard.less, line 4