Elements

<Block />

A core element for displaying informational records & headers. The <Block> has a strict set of rules governing it’s three column, opt-in, layout. Blocks adapt to many contexts.

Requires: Wrapper, Action, Thing, Icon, Flag, Tag

Props: icon, lines, indicator, flag, tag

Basic Usage 

<Block
  lines={[
    'CAAS100383547',
    'Policy Period 12/31/2018 to 12/31/2019',
    'This policy has ONE vehicle insured.',
  ]}
/>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.
show example code

Variations

Additional Lines
Add up to four lines of text. Multi-line text should go on line 4.

<Block
  lines={[
    'CAAS100383547',
    'Policy Period 12/31/2018 to 12/31/2019',
    'This policy has ONE vehicle insured.',
    'Line 4 is for multi-line text except if line 4 is two lines it should be on line 3.',
  ]}
/>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.Line 4 is for multi-line text except if line 4 is two lines it should be on line 3.

Indicators

Icons
Add an icon for additional visual relevance but specifying:

  • icon.ID
  • icon.SIZE
<Block
  icon={{
    id:'core-auto',
    size:'m',
  }}
  lines={[
    'CAAS100383547',
    'Policy Period 12/31/2018 to 12/31/2019',
  ]}
/>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019

Flag
Add Flag to the third column by specifying

  • flag.THEME
  • icon.LABEL
<Block
  lines={[
    'CAAS100383547',
    'Policy Period 12/31/2018 to 12/31/2019',
  ]}
  flag={{
    theme:'c3po',
    label:'Inactive',
  }}
/>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019Inactive

Add one or more Flags to line three OR four by passing an array instead of a string.

  • line[2][0].ELEMENT = ‘flag’
  • line[2][0].THEME
  • line[2][0].LABEL
<Block
  lines={[
    '2015 Lexus ES',
    'Replacing 2006 Honda Accord',
    [
      {
        element:'flag',
        theme:'saber',
        label:'Pending',
      },
    ],
  ]}
/>
2015 Lexus ESReplacing 2006 Honda AccordPending

Tag
Add one or more Tags to line three OR line four by passing an array instead of a string. Tags, unlike Flags, can only go on line three OR four.

  • line[2][0].ELEMENT = ‘tag’
  • line[2][0].ICON
  • line[2][0].LABEL
<Block
  lines={[
    '2015 Lexus ES',
    'Replacing 2006 Honda Accord',
    [
      {
        element:'tag',
        icon:'core-auto',
        label:'Pending',
      },
    ],
  ]}
/>
2015 Lexus ESReplacing 2006 Honda AccordPending

Flags & Tags
Add a mixture of Flags & Tags to line three OR four. Currently there are no designs that require this functionality, so it is discouraged.

  • line[2][0].ELEMENT = ‘flag’
  • line[2][0].THEME
  • line[2][0].LABEL
    PLUS
  • line[2][0].ELEMENT = ‘tag’
  • line[2][0].ICON
  • line[2][0].LABEL
<Block
  lines={[
    '2015 Lexus ES',
    'Replacing 2006 Honda Accord',
    [
      {
        element:'flag',
        theme:'saber',
        label:'Pending',
      },
      {
        element:'tag',
        icon:'core-auto',
        label:'Pending',
      },
    ],
  ]}
/>
2015 Lexus ESReplacing 2006 Honda AccordPendingPending

Fully Loaded
Blocks are very capable and were designed to function with minimal amount of information (single line of text) or with a maximum amount of information. These capabilities afford designers the ability to show data by many different dimensions.

  • ICON
  • LINES
  • TAGs
  • FLAGs
<Block
  icon={{
    id:'core-auto',
    size:'m',
  }}
  lines={[
    '2016 Ford Explorer',
    'Policy Period 12/31/2018 to 12/31/2019',
    'This policy has ONE vehicle insured.',
    [
      {
        element:'tag',
        icon:'core-auto',
        label:'CAAS100383547',
      },
    ]
  ]}
  flag={{
    theme:'saber',
    label:'Active',
  }}
/>
2016 Ford ExplorerPolicy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.CAAS100383547Active

Definitions 

{
  block:{
    col_1: {
      width:{
        xs: '24px',
        s: '40px',
        m: '64px',
        l: '88px',
      },
    },
    col_2: {

    },
    col_3: {
      width:{
        min:'40px',
      },
      margin:'0 0 0 8px',
      padding:'0 0 0 0',
    },
    line: {
      margin: '0 0 8px 0',
    },
  },
}

Tokens 

@mixin block {

}

Videos

Blocks are everywhere
Layout Concepts
Column Three
Technically...
Where Icons Go

Examples

<>
Line One
<>
CAAS100383547
<>
Line OneLine Two
<>
CAAS100383547Policy Period 12/31/2017 to 12/31/2018
<>
CAAS100383547Policy Period 12/31/2017 to 12/31/2018Pending
<>
CAAS100383547Policy Period 12/31/2017 to 12/31/2018
<>
CAAS100383547Policy Period 12/31/2017 to 12/31/2018Active
<>
Line OneLine Two Line Four
<>
CAAS100383547Second line about this and that Policy Period 12/31/2018 to 12/31/2019
<>
CAAS100383547Second line about this and that Policy Period 12/31/2018 to 12/31/2019
<>
2015 Lexus ESReplacing 2006 Honda AccordPending
<>
2015 Lexus ESReplacing 2006 Honda AccordCAAS100383547Policy Expired
<>
2015 Lexus ESReplacing 2006 Honda AccordPendingCAAS100383547
<>
Line OneLine TwoLine ThreeLine Four
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.Line 4 is for multi-line text except if line 4 is two lines it should be on line 3.
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.Line 4 is for multi-line text except if line 4 is two lines it should be on line 3.
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.CAAS100383547Active
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.Line 4 is for multi-line text except if line 4 is two lines it should be on line 3.Inactive

Block (vs Action > Block)

<>
CAAS100383547
<>
CAAS100383547
<>
CAAS100383547
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.Line 4 is for multi-line text except if line 4 is two lines it should be on line 3.
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.Line 4 is for multi-line text except if line 4 is two lines it should be on line 3.
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019This policy has ONE vehicle insured.Line 4 is for multi-line text except if line 4 is two lines it should be on line 3.
<>
CAAS100383547Policy Period 12/31/2018 to 12/31/2019Line 4 is for multi-line text except if line 4 is two lines it should be on line 3.

UI.BLOCK

<>
New VehicleReplacing 2006 Honda Accord
<>
Line 1Line 2Pending
<>
CAA9111929292Auto PolicyPolicy Period: 2018-2019
<>
CAA9111929292Auto PolicyPolicy Period: 2018-2019A one-time payment was made in December 2018. Paid up through next year.
Elements
<Block />
Elements
<Buttons />

Digital Commons

Powered by Catalog