Component Library

About columns 

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <article class="text-box text-box--centered">
                <div class="text-box__inner">
                    <div class="text-box__content">
                        <h2 class="heading heading--column ">Atomic design</h2>

                        <p>The Pattern Library is based on the Atomic Design method by Brad Frost.</p>
                    </div>
                </div>
            </article>
        </div>
        <div class="col-xs-12 col-sm-6">
            <article class="text-box text-box--centered">
                <div class="text-box__inner">
                    <div class="text-box__content">
                        <h2 class="heading heading--column ">Frontend Package</h2>

                        <p>Build using our own tools and best practices for building websites.</p>
                    </div>
                </div>
            </article>
        </div>
    </div>
    <div class="row center-sm">
        <div class="col-xs-12 col-sm-6">
            <article class="text-box text-box--centered">
                <div class="text-box__inner">
                    <div class="text-box__content">
                        <h2 class="heading heading--column ">Pattern Library tool</h2>

                        <p>The Pattern Library is build using Clearlefts tool Fractal.</p>
                    </div>
                </div>
            </article>
        </div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            {{ render '@text-box--centered' textbox1 }}            
        </div>
        <div class="col-xs-12 col-sm-6">
            {{ render '@text-box--centered' textbox2 }}            
        </div>
    </div>
    <div class="row center-sm">
        <div class="col-xs-12 col-sm-6">
            {{ render '@text-box--centered' textbox3 }}            
        </div>
    </div>
</div>
 
{
  "textbox1": {
    "heading": {
      "text": "Atomic design"
    },
    "textBoxContent": "The Pattern Library is based on the Atomic Design method by Brad Frost."
  },
  "textbox2": {
    "heading": {
      "text": "Frontend Package"
    },
    "textBoxContent": "Build using our own tools and best practices for building websites."
  },
  "textbox3": {
    "heading": {
      "text": "Pattern Library tool"
    },
    "textBoxContent": "The Pattern Library is build using Clearlefts tool Fractal."
  }
}

There are no notes for this item.