Date Stacked

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

Default

import React from 'react'
import DateStacked from 'playbook-ui'

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

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

      <br />

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

    </div>
  )
}

export default DateStackedDefault

Not Current Year

import React from 'react'
import DateStacked from 'playbook-ui'

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

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

      <br />

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

    </div>
  )
}

export default DateStackedNotCurrentYear

Day & Month Reverse

import React from 'react'
import DateStacked from 'playbook-ui'

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

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

      <br />

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

    </div>
  )
}

export default DateStackedDefault

Sizes

import React from 'react'
import DateStacked from 'playbook-ui'

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

export default DateStackedSizes

Bold

import React from 'react'
import DateStacked from 'playbook-ui'

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

      <br />

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

      <br />

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

      <br />

    </div>
  )
}

export default DateStackedBold

Things to Avoid

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

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat