Version

Island

Displays an island.

Island

Example
<div id="island"></div>
import {render} from 'react-dom';
import React from 'react';
import Island, {Header, Content} from '@jetbrains/ring-ui/components/island/island';

const renderIslandDemo = () => (
  <Island>
    <Header border>Title</Header>
    <Content>Content</Content>
  </Island>
);

render(renderIslandDemo(), document.getElementById('island'));

Island with scroll

Example
<div id="island"></div>
:global(.limited-island) {
  height: 200px;
  width: 200px;
}
import {render} from 'react-dom';
import React from 'react';
import Island, {Header, Content} from '@jetbrains/ring-ui/components/island/island';

const renderIslandDemo = () => (
<Island className="limited-island" narrow>
  <Header border>Title</Header>
  <Content fade>
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever
    since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has survived not only five
    centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged.
  </Content>
</Island>
);

render(renderIslandDemo(), document.getElementById('island'));

Adaptive island with resizeable header

Example
<div id="island"></div>
:global(.limited-island) {
  height: 200px;
  width: 200px;
}
import {render} from 'react-dom';
import React from 'react';
import {AdaptiveIsland, Header, Content, HeaderResizer} from '@jetbrains/ring-ui/components/island/island';

const renderIslandDemo = () => (
<AdaptiveIsland className="limited-island" narrow>
  <Header>Title</Header>
  <Content fade>
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever
    since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has survived not only five
    centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged.
  </Content>
</AdaptiveIsland>
);

render(renderIslandDemo(), document.getElementById('island'));