Arrow componentAvailable since EcoComposer 1.0

Arrow examples
Default SCSS values
SCSS implementation
HTML implementation

With no CSS at all

Those are unicode characters found in the unicode group "Geometric Shapes".

Large full arrows

▲︎ ▶︎ ▼︎ ◄︎

Small full arrows

▴︎ ▸︎ ▾︎ ◂︎

With CSS

"Empty" arrows

Complex arrows

▲︎ ▶︎ ▼︎ ◄︎

The defaults values are :

'arrow--border-color' : 'arrow--border-color',
'arrow--color' : 'arrow--color',
'position' : 'right',
'print' : false,
'size' : .3rem * theming.$font-size,
'suffix' : '',
'themes' : (
  'light' : (
    'default--arrow--border-color' : #000,
    'default--arrow--color' : #000
  ),
  'dark' : (
    'default--arrow--border-color' : #fff,
    'default--arrow--color' : #fff
  )
)

We can implement it that way :

  // Empty arrows
  @include arrow.init-empty;
  @include arrow.empty;
  @include arrow.empty(
    (
      'arrow--border-color' : 'arrow-border',
      'size' : 1rem,
      'position' : 'up',
      'suffix' : '-2',
      'themes' : $themes
    )
  );

  // Full arrows
  @include arrow.init-double;
  @include arrow.double;
  @include arrow.double(
    (
      'arrow--color' : 'arrow-double-3',
      'position' : 'up',
      'size' : 20rem,
      'suffix' : '-3',
      'themes' : $themes
    )
  );