DAHLIA Pattern Library

Block Item 

<div class="block-item ">
    <h3 class="t-delta t-sans margin-bottom--half">
        <a class="a-oil">Agency</a>
    </h3>

    <div class="a-icon-left d-block">
        <span class="ui-icon ui-static ui-medium i-color ">
      <svg>
        <use xlink:href="#i-map"></use>
      </svg>
    </span>

        <p class="offset-icon margin-bottom--half">
            111 Address St., <br> San Francisco, 00000
        </p>
    </div>

    <p>
        <a class="button-on-small" href="tel:+1###-###-###">
      <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-phone"></use>
        </svg>
      </span>

      Call ###-###-###
    </a>
        <a class="button-on-small" href="http://www.com" target="_blank">
      <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-link"></use>
        </svg>
      </span>

      Visit Agency
    </a>
    </p>
</div>
 
<div class="block-item {{default classes ''}}">
  <h3 class="t-delta t-sans margin-bottom--half">
    <a class="a-oil">{{default name 'Agency'}}</a>
  </h3>
  
  {{#if languages}}
    <p class="t-tiny c-steel">Language Services:
      {{#each languages}}
        <span class="label radius secondary i-block">{{default languages 'Language'}}</span>
      {{/each}}
    </p>
  {{/if}}

  <div class="a-icon-left d-block">
    {{> @icons-base icon="map"}}

    <p class="offset-icon margin-bottom--half">
      {{default address '111 Address St.'}}, <br>
      {{default citystate 'San Francisco, 00000'}}
    </p>
  </div>

  <p>
    <a class="button-on-small" href="tel:+1{{default phone '###-###-###'}}">
      {{> @icons-base icon="phone"}}

      Call {{default phone '###-###-###'}}
    </a>
    <a class="button-on-small" href="http://{{default website 'www.com'}}" target="_blank">
      {{> @icons-base icon="link"}}

      Visit {{default name 'Agency'}}
    </a>
  </p>
</div>
 
/* No context defined for this component. */

There are no notes for this item.