ui.md

<div class="crm-accordion-wrapper collapsed">
  <div class="crm-accordion-header">
    Accordion Title here
  </div>
  <div class="crm-accordion-body">
     <div class="crm-block crm-form-block crm-form-title-here-form-block">
       Accordion Body here
     </div>
   </div>
</div>
{literal}
// Example from templates/CRM/Contribute/Form/Contribution.tpl
// bind first click of accordion header to load crm-accordion-body with snippet
// everything else taken care of by cj().crm-accordions()
CRM.$(function($) {
  cj('#adjust-option-type').hide();
  cj('.crm-ajax-accordion .crm-accordion-header').one('click', function() {
    loadPanes(cj(this).attr('id'));
  });
  cj('.crm-ajax-accordion:not(.collapsed) .crm-accordion-header').each(function(index) {
    loadPanes(cj(this).attr('id'));
  });
});
// load panes function calls for snippet based on id of crm-accordion-header
function loadPanes( id ) {
  var url = "{/literal}{crmURL p='civicrm/contact/view/contribution' q='snippet=4&formType=' h=0}{literal}" + id;
  {/literal}
  {if $contributionMode}
    url = url + "&mode={$contributionMode}";
  {/if}
  {if $qfKey}
    url = url + "&qfKey={$qfKey}";
  {/if}
  {literal}
  if (! cj('div.'+id).html()) {
    var loading = '<img src="{/literal}{$config->resourceBase}i/loading.gif{literal}" alt="{/literal}{ts escape='js'}loading{/ts}{literal}" />&nbsp;{/literal}{ts escape='js'}Loading{/ts}{literal}...';
    cj('div.'+id).html(loading);
    cj.ajax({
      url : url,
      success: function(data) { cj('div.'+id).html(data).trigger('crmLoad'); }
    });
  }
}
<a title="Button Text" class="button_name button" href="#">
  <span>
    <div class="icon icon_name-icon"></div>
    Button Text
  </span>
</a>
<a title="Button Text" class="button_name button" href="#">
  <span>Button Text</span>
</a>
<a title="Edit" class="edit button" href="#">
  <span>
    <div class="icon edit-icon"></div>
    Edit
  </span>
</a>
$('[name=my_field]').crmDatepicker();
$('[name=my_field]').crmDatepicker({time: false, date: 'dd-mm-yy'});
<input crm-ui-datepicker="{time: false, date: 'dd-mm-yy'}" ng-model="myobj.datefield"/>
// Use default settings
$this->add('datepicker', 'field_name', ts('Field Label'));

// Make it required, customize datepicker and remove time field
$this->add(
  'datepicker',
  'field_2',
  ts('Field 2'),
  array('class' => 'some-css-class'),
  TRUE,
  array('time' => FALSE, 'date' => 'mm-dd-yy', 'minDate' => '2000-01-01')
);
<div><i class="crm-i fa-bullhorn"></i>Create new announcement</div>
Many websites use Font Awesome, and a site's implementation of the `fa` class might differ from CiviCRM's Font Awesome implementation.  The version might be different, or other styling might be associated with the class.

To avoid this, CiviCRM uses the `crm-i` class alongside the `fa-...` class for the specific icon.
<div class="icon delete-icon"></div>
<div class="icon red-icon delete-icon"></div>
<table>
  <tr class="crm-entity" id="contact-123">

    <!-- textfield (default type) -->
    <td class="crm-editable crmf-first_name">Fred</td>

    <!-- select list with empty option -->
    <!-- (note: options will be fetched automatically by the api) -->
    <td class="crm-editable crmf-prefix_id"
        data-type="select"
        data-empty-option="{ts}- none -{/ts}">Mr.</td>

    <!-- yes/no select -->
    <td class="crm-editable crmf-is_deceased" data-type="boolean">
      No
    </td>

  </tr>
</table>
$.('crm-editable').crmEditable();
$('#form_element').crmError(ts('Wrong input'));
CRM.alert(message, title, type, options);
CRM_Core_Session::setStatus($message, $title, $type, $options);