<template>
  <div class="text-item"
       :class="align"
       :style="{
       'color': textColor,
       'font-size': fontSize+'px',
       'line-height': lineHeight
       }"
  >
    {{content}}
  </div>
</template>

<script>
  export default {
    name: 'md-text-item',
    props: {
      content: {
        type: String,
        default: ''
      },
      align: {
        type: String,
        default: 'right'
      },
      textColor: {
        type: String,
        default: ''
      },
      fontSize: {
        type: Number,
        default: 16
      },
      lineHeight: {
        type: String,
        default: ''
      }
    }
  }

</script>

<style lang="stylus">
.text-item
  &.left
   text-align left
  &.center
   text-align center
  &.right
   text-align right

</style>
