INTRODUCTION

This page lists all of the currently supported HTML shortcodes that can be used with the Blocs API. These shorthand objects are designed to be combined with each other to create actual layout HTML. The key item on the left is the shortcode and the item on the right is what is generated inside of the Blocs enviroment.

LAYOUT

  • row = <div class="row">
  • row_offset = <div class="row voffset">
  • row_offset_lg = <div class="row voffset-lg">
  • col1 = <div class="col-sm-1">
  • col2 = <div class="col-sm-2">
  • col2_c = <div class="col-xs-2 col-xs-offset-5">
  • col2_tc = <div class="col-sm-2 text-center">
  • col3 = <div class="col-sm-3">
  • col3_tc = <div class="col-sm-3 text-center">
  • col3_tr = <div class="col-sm-3 text-right">
  • col4 = <div class="col-sm-4">
  • col4_c = <div class="col-xs-4 col-xs-offset-4">
  • col4_tc = <div class="col-sm-4 text-center">
  • col5 = <div class="col-sm-5">
  • col6 = <div class="col-sm-12 col-md-6 col-md-offset-3">
  • col6_c = <div class="col-sm-4">
  • col6_tcc = <div class="col-sm-12 col-md-6 col-md-offset-3 text-center">
  • col7 = <div class="col-sm-7">
  • col8 = <div class="col-sm-8">
  • col8_c = <div class="col-sm-12 col-md-8 col-md-offset-2">
  • col8_tc = <div class="col-sm-12 col-md-8 col-md-offset-2 text-center">
  • col9 = <div class="col-sm-9">
  • col9_tr = <div class="col-sm-9 text-right">
  • col10 = <div class="col-sm-10">
  • col10_tr = <div class="col-sm-10 text-right">
  • col11 = <div class="col-sm-11">
  • col12 = <div class="col-sm-12">
  • col12_tc = <div class="col-sm-12 text-center">
  • div_tc = <div class="text-center">
  • ctag = </div>

TEXT

  • header(1,'My Title') = <h1>My Title</h1>
  • header(2,'My Title') = <h2>My Title</h2>
  • header(3,'My Title') = <h3>My Title</h3>
  • header(4,'My Title') = <h4>My Title</h4>
  • header(5,'My Title') = <h5>My Title</h5>
  • header(6,'My Title') = <h6>My Title</h6>
  • para(ipsum) = <p>Lorum Ipsum x 42 words</p>
  • ipsum = Lorum Ipsum x 42 words
  • m_ipsum = Lorum Ipsum x 27 words
  • s_ipsum = Lorum Ipsum x 11 words

IMAGE

  • img = <img src="img/placeholder-image.png" class="img-responsive">
  • img_user = <img src="img/placeholder-user.png" class="img-responsive">
  • img_sq = <img src="img/placeholder-image-sq.png" class="img-responsive">
  • img_wide = <img src="img/placeholder-image-wide.png" class="img-responsive">
  • img_user_round = <img src="img/placeholder-user.png" class="img-responsive img-circle">

ICON

  • icon_single = <span class="fa fa-star icon-md pull-left"></span>
  • icon_round = <span class="fa fa-star icon-round icon-md pull-left"></span>
  • icon_text = <span class="fa fa-star"></span>

VIDEO

  • vid = <div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="https://player.vimeo.com/video/111507117" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
  • vid_wide = <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://player.vimeo.com/video/111507117" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

FORM

  • text_field = <div class="form-group"><input class="form-control"></div>
  • text_field_label = <div class="form-group"><label>Label</label><input class="form-control"></div>
  • text_area = <div class="form-group"><textarea class="form-control" rows="4" cols="50"></textarea></div>
  • text_area_label = <div class="form-group"><label>Label</label><textarea class="form-control" rows="4" cols="50"></textarea></div>
  • form_label = <div class="form-group"><input class="form-control"></div>
  • form_label = <div class="form-group"><label>Label</label></div>
  • check_box = <div class="checkbox"><label><input type="checkbox">Check label</label></div>
  • radio = <div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Choice one</label></div>

MISC

  • iFrame = <iframe data-src"" width="100%" height="300" frameborder="0" style="border:0">/iframe>
  • span = <span>
  • divider_h = <div class="divider-h"><span class="divider"></span>/div>