UI Elements
Digital aesthetics are meaningful when they support function
Visual components on a screen are competing against one another for the user's attention. As such, their placement and relative size need to be balanced and in relationship with their functional importance. The Terumo BCT brand elements should play an integral part to the heirarchy of elements. For example, the corporate green should be used as positive reinforcement to highlight important actions or elements.
Buttons
Standard Buttons
Standard Buttons
Ordinality
A button can be formatted to show different levels of emphasis
Success Info Warning Danger
Success Info Warning Danger
Success Info Warning Danger
Success Info Warning Danger
Icon
A button can have only an icon
Labeled Icon
A button can have a label and an icon
Grouped
Buttons can exist together in groups
Tables
| Title | Title | Title |
|---|---|---|
| value | value | value |
| value | value | value |
| value | value | value |
HEADINGSubtitle here |
HEADINGSubtitle here |
HEADINGSubtitle here |
|---|---|---|
| value | value | value |
| value | value | value |
| value | value | value |
| # | value | value | value |
|---|---|---|---|
| 1 | value | value | value |
| 2 | value | value | value |
| 3 | value | vaule | value |
| Title | Title | Title | |
|---|---|---|---|
| Title | value | value | value |
| Title | value | value | value |
| Title | value | value | value |
Inputs
Navigation
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis porro sint cupiditate officia fuga, quisquam ipsam consequatur cumque excepturi mollitia facere ab, aspernatur neque eaque vel molestiae itaque qui saepe.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio delectus ut, voluptatum assumenda esse deleniti nostrum sint magni numquam eaque, incidunt accusantium maiores repellendus nemo laudantium placeat mollitia tempore!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident similique, assumenda id est cupiditate asperiores unde doloremque ipsum accusamus voluptates accusantium at totam saepe error, sequi non eaque dolorum dicta.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, illo officia eaque ducimus quidem quibusdam, inventore hic natus fugit. Ducimus expedita aliquam, pariatur voluptatem placeat tenetur id non nemo, quis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis porro sint cupiditate officia fuga, quisquam ipsam consequatur cumque excepturi mollitia facere ab, aspernatur neque eaque vel molestiae itaque qui saepe.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio delectus ut, voluptatum assumenda esse deleniti nostrum sint magni numquam eaque, incidunt accusantium maiores repellendus nemo laudantium placeat mollitia tempore!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident similique, assumenda id est cupiditate asperiores unde doloremque ipsum accusamus voluptates accusantium at totam saepe error, sequi non eaque dolorum dicta.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, illo officia eaque ducimus quidem quibusdam, inventore hic natus fugit. Ducimus expedita aliquam, pariatur voluptatem placeat tenetur id non nemo, quis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis porro sint cupiditate officia fuga, quisquam ipsam consequatur cumque excepturi mollitia facere ab, aspernatur neque eaque vel molestiae itaque qui saepe.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio delectus ut, voluptatum assumenda esse deleniti nostrum sint magni numquam eaque, incidunt accusantium maiores repellendus nemo laudantium placeat mollitia tempore!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident similique, assumenda id est cupiditate asperiores unde doloremque ipsum accusamus voluptates accusantium at totam saepe error, sequi non eaque dolorum dicta.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, illo officia eaque ducimus quidem quibusdam, inventore hic natus fugit. Ducimus expedita aliquam, pariatur voluptatem placeat tenetur id non nemo, quis.
Alerts
How to Use
The user interface elements on this page show the custom Terumo BCT branded theme applied to the Bootstrap framework. For more detailed information on how to use this framework click here.