Home›Docs›Basic›Break Space

Break Space

Last updated: 9 days ago

Category: Basic

The OC-BR component is a replacement for the native br tag; this break-row component can create horizontal separation space within the context. br stands for break-row. Additionally, the OC-BC compone...

Divider Space9 days agoLine Space9 days agoBreak Space9 days ago

Preface

The native <br> tag only creates line breaks within text flow and isn't semantically suitable for vertical spacing between content blocks. Additionally, HTML standards currently don't provide tags specifically for horizontal spacing. To address this, our framework introduces two custom tags: <oc-br> and <oc-bc>.

br stands for "break row"
bc stands for "break column"

Note: Neither <oc-br> nor <oc-bc> are registered Web Components - they simply serve as CSS containers.

Vertical Spacing (Break Row)

The custom <oc-br> tag creates vertical spacing between content blocks and supports one attribute: size, with the following values:

xxs: 4px height
xs: 8px height
sm: 14px height (default)
md: 24px height
lg: 32px height
xl: 40px height
xxl: 48px height

Note: On mobile devices, these dimensions are proportionally reduced.

Output
HTML

The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.

South Korea is a global leader in innovation, with major companies like Samsung and Hyundai driving its economy. It's also a cultural powerhouse thanks to the global popularity of K-pop, Korean dramas, and fashion. With a strong education system and urban infrastructure, South Korea maintains rapid development while preserving Confucian values and rich historical sites.

As the world’s largest democracy and most populous nation, India is rich in languages, religions, and traditions. Its economy is rapidly expanding, particularly in technology, space research, and pharmaceuticals. Home to both ancient monuments and a booming startup scene, India blends deep-rooted spirituality with modern ambition. Festivals like Diwali and Holi symbolize its vibrant cultural life.
```
                
                
            
```

Horizontal Spacing (Break Column)

The custom <oc-bc> tag creates horizontal spacing between content blocks and supports one attribute: size, with the following values:

xxs: 4px width
xs: 8px width
sm: 14px width (default)
md: 24px width
lg: 32px width
xl: 40px width
xxl: 48px width

Important notes about <oc-bc>:

Has height: 100% by default - will collapse to 0 height if parent element has no explicit height
Dimensions are proportionally reduced on mobile devices

Output
HTML

The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.

South Korea is a global leader in innovation, with major companies like Samsung and Hyundai driving its economy. It's also a cultural powerhouse thanks to the global popularity of K-pop, Korean dramas, and fashion. With a strong education system and urban infrastructure, South Korea maintains rapid development while preserving Confucian values and rich historical sites.

As the world’s largest democracy and most populous nation, India is rich in languages, religions, and traditions. Its economy is rapidly expanding, particularly in technology, space research, and pharmaceuticals. Home to both ancient monuments and a booming startup scene, India blends deep-rooted spirituality with modern ambition. Festivals like Diwali and Holi symbolize its vibrant cultural life.
```
                
                
            
```

Attributes

Name	Possible Values	Default	Description
size	'xxs'/'xs'/'sm'/'md' /'lg'/'xl'/'xxl'	'sm'	Controls spacing size (defaults to 14px, 16-18px on mobile)

Ajax Request

9 days ago

Line Space