Cards

Basic Card example

  	
  		 <div class="card rbn-card">
    <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="Card Title">
    <div class="card-body">
      <h3 class="h5 card-title">Card Title</h3>
      <p class="card-text">Card supporting copy</p>
        <a class="btn btn-primary stretched-link">CTA Button</a>
    </div>
  </div>
  
  	
  

Product Card Example

  	
  		 <div class="card card-rbn-product">
    <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
    <div class="card-body">
      <h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
      <p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
      <p class="card-text">Product description</span>
    </div>
  </div>
  
  	
  

Article Card example

  	
  		 <div class="card rbn-article-card">
    <img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
    <div class="card-body">
      <h3 class="card-title">
          <span class="card-sub-title">Super Heading</span>
          Article Title
      </h3>
      <p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
      <a href="#" class="card-link stretched-link mt-auto">Read more</a>
    </div>
  </div>
  
  	
  

Product Literature Card

  	
  		<div class="card rbn-literature-card">
    <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Document Title">
    <div class="card-body">
      <h4 class="card-title">Document Title</h4>
      <a href="#" class="card-link download-link stretched-link">
        <div class="visually-hidden">Download File</div>
      </a>
    </div>
  </div>
  
  	
  

Accessory Card

    
Component Data
    
      title: [string] - Accessory title
      model: [string] - Accessory model number
      cost: [string] - Accessory cost
      prodPath: [string] - Path/url to accessory webpage
      source: [string] - Card image source (local)
      sourceAbs: [string] - Card image source (absolute)
      installGuide: [string] - Optional: Path/url to accessory install guide file (Shows in configuration area on PDP template)
      specSheet: [string] - Optional: Path/url to accessory specification sheet file (Shows in configuration area on PDP template)
    
  

  	
  		<div class="card rbn-accessories-card">
    <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="">
    <div class="card-body">
      <h6 class="card-title">Accessory Title</h6>
      <p class="card-text small text-muted">[Product Number]</p>
      <p class="card-text small">Optional descriptive text</p>
      <p class="card-text fs-6 mt-auto pt-2">$100</p>
      <div class="d-grid gap-2 pt-2">
        <a href="#" class="btn btn-primary btn-sm">View Details</a>
        <input type="checkbox" class="btn-check" id="btncheck" autocomplete="off" data-rbn-cost="100" data-rbn-model="[Product Number]" data-rbn-name="Accessory%20Title" data-rbn-install="#" data-rbn-spec="#">
        <label class="btn btn-outline-dark btn-sm" for="btncheck"><span class="add">Add</span><span class="remove">Remove</span> Item</label>
      </div>
    </div>
  </div>
  
  	
  

Technical Document Card

  	
  		<div class="card rbn-document-card">
    <div class="card-body">
      <h4 class="card-title">Document Title</h4>
      <p class="card-text">Optional product size info</p>
      <p class="card-text">Short description</p>
      <a href="#" class="card-link stretched-link">Download File</a>
    </div>
  </div>