Date Stacked

Use to display the date, stacking month and day.

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('20 Mar 2018')}
          size="md"
      />

    </div>
  )
}

export default DateStackedDefault

Show Current Year

By default, the Date Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true as shown here.

import React from 'react'

import { DateStacked } from 'playbook-ui'

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

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

      <br />

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

export default DateStackedCurrentYear

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

Github

Connect Chat