Responsive design

Size options

The size prop controls pitch dimensions:

Value	Width	Height	Use Case
`"small"`	600px	350px	Small widgets, sidebars
`"normal"`	900px	525px	Default, standard views
`"big"`	1200px	700px	Full-page displays
`"responsive"`	100%	Auto	Fluid layouts (recommended)
`"fill"`	100%	100%	Container-controlled sizing

Fluid sizes

`responsive` (recommended)

Use size="responsive" for fluid layouts that adapt to container width:

<SoccerLineUp size="responsive" />

The pitch maintains a 12:7 aspect ratio and scales proportionally with its container.

`fill` (100% x 100%)

Use fill for custom sizes and aspect ratios. The pitch will fill its container completely:

<div style={{ width: '100%', height: '400px' }}>
  <SoccerLineUp size="fill" />
</div>

The pitch will stretch to fill both width and height of its parent container.

Fixed sizes

For consistent layouts, use fixed sizes:

`small` (600 x 350)

<SoccerLineUp size="small" />

`normal` (900 x 525)

<SoccerLineUp size="normal" />

`big` (1200 x 700)

<SoccerLineUp size="big" />

Player size

Player markers scale automatically with the pitch (size: 'auto', the default). In small containers — typically with responsive or fill pitches — that can make the players too small to read. Set the team’s style.size to decouple the player size from the pitch size:

Value	Diameter
`'auto'`	Scales with the pitch (default)
`'small'`	24px
`'medium'`	32px
`'big'`	44px
`number`	Custom diameter in pixels

// Players keep a readable fixed size, no matter how small the pitch gets
<div style={{ width: '300px', height: '200px' }}>
  <SoccerLineUp
    size="fill"
    homeTeam={{ squad, style: { size: 'small' } }}
  />
</div>

With explicit sizes, the number and name typography, the name label spacing and the marker border scale proportionally with the diameter. The size attribute can also be overridden per player — see the Styling guide.

Best Practices

1. Use `responsive` for most cases

function MatchView() {
  return (
    <div className="match-container">
      <SoccerLineUp size="responsive" homeTeam={team} />
    </div>
  );
}

2. Constrain with container

// Limit maximum width while staying responsive
<div style={{ maxWidth: '1000px', margin: '0 auto' }}>
  <SoccerLineUp size="responsive" />
</div>

3. Use `fill` for custom containers

// Custom aspect ratio container
<div style={{ width: '100%', paddingBottom: '60%', position: 'relative' }}>
  <div style={{ position: 'absolute', inset: 0 }}>
    <SoccerLineUp size="fill" />
  </div>
</div>

CSS considerations

The component uses box-sizing: border-box internally. When using fill or responsive modes, ensure the parent container has defined dimensions:

<div className="soccer-lineup-wrapper">
  <SoccerLineUp
    size="responsive"
    color={color}
    pattern={pattern}
    homeTeam={homeTeam}
    awayTeam={awayTeam}
  />
</div>

.soccer-lineup-wrapper {
  width: 100%;
  /* For responsive mode, height is automatic */
  /* For fill mode, specify height */
}

.soccer-lineup-wrapper {
  width: 100%;
  height: 500px; /* Required for fill mode */
}

Freely override the font family to be consistent with your application’s style. Overriding the font size is fine while using the default 'auto' player size:

.soccer-lineup-wrapper {
  * {
    font-family: 'Roboto';
    font-size: 14px;
  }
}

With explicit player sizes (style.size), prefer letting the library derive the typography: a global font-size override would cancel the proportional scaling.

Responsive design

Size options

Fluid sizes

responsive (recommended)

fill (100% x 100%)