Date Stacked

Use to display the date, stacking month and day. Year will not show if it is the current year.

Default

Code Example

import React from 'react'
import DateStacked from '../_date_stacked'

const DateStackedDefault = (props) => {
  return (
    <div>

      <DateStacked
          align="left"
          date={new Date()}
          size="sm"
          {...props}
      />

      <br />

      <DateStacked
          date={new Date()}
          size="md"
          {...props}
      />

    </div>
  )
}

export default DateStackedDefault

Not Current Year

Code Example

import React from 'react'
import DateStacked from '../_date_stacked'

const DateStackedNotCurrentYear = (props) => {
  return (
    <div>

      <DateStacked
          date={new Date('20 Mar 2018')}
          size="sm"
          {...props}
      />

      <br />

      <DateStacked
          date={new Date('20 Mar 2018')}
          size="md"
          {...props}
      />

    </div>
  )
}

export default DateStackedNotCurrentYear

Day & Month Reverse

Code Example

import React from 'react'
import DateStacked from '../_date_stacked'

const DateStackedDefault = (props) => {
  return (
    <div>

      <DateStacked
          align="left"
          date={new Date()}
          reverse
          size="sm"
          {...props}
      />

      <br />

      <DateStacked
          date={new Date()}
          reverse
          size="md"
          {...props}
      />

    </div>
  )
}

export default DateStackedDefault

Sizes

Code Example

import React from 'react'
import DateStacked from '../_date_stacked'

const DateStackedSizes = (props) => {
  return (
    <div>
      <DateStacked
          date={new Date()}
          size="sm"
          {...props}
      />
      <br />
      <DateStacked
          date={new Date()}
          size="md"
          {...props}
      />
    </div>
  )
}

export default DateStackedSizes

Bold

Code Example

import React from 'react'
import DateStacked from '../_date_stacked'

const DateStackedBold = (props) => {
  return (
    <div>
      <DateStacked
          align="left"
          bold
          date={new Date()}
          {...props}
      />

      <br />

      <DateStacked
          align="center"
          bold
          date={new Date('20 Mar 2018')}
          {...props}
      />

      <br />

      <DateStacked
          align="right"
          bold
          date={new Date()}
          {...props}
      />

      <br />

    </div>
  )
}

export default DateStackedBold

Things to Avoid

Do not use in data tables where data density is a priority.