Skip to main content
The Text component displays formatted content in a card layout with a title header. It’s currently used for the Video Monetization Policy page.

​
Features

  • Card layout with bordered design
  • Custom title prop
  • Centered content with max-width
  • White-on-transparent styling
  • Static content with video policy guidelines

​
Props

​
title
string
required
The title displayed in the card header

​
Usage

src/pages/youtube.astro
---
import Text from "../components/Text.astro";
---

<Text title="RobTop Games: Monetization" />

​
Component Code

src/components/Text.astro
---
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<div class="container py-4">
  <div class="card border-white text-white bg-transparent">
    <div class="card-header">
      <h1 class="text-center mb-0">{title}</h1>
    </div>
    <div class="card-body">
      <div class="mb-4">
        <p>
          You are allowed to create videos of Geometry Dash, upload or stream from YouTube or other
          video sites, and monetize those videos.
        </p>
      </div>

      <div class="mb-4">
        <p>
          You may not make any other commercial use of any of our Brands or Assets. For example you
          may not sell any merchandise that uses any of our Brands or Assets and you may not use our
          Names as keywords or search tags for products that have no relationship with them.
        </p>
      </div>

      <div class="mb-4">
        <p>
          Do not copy or take any assets from our content and distribute them separately (like
          characters, voices, music, images).
        </p>
      </div>

      <div>
        <p>
          Please remember that these guidelines apply only to content created or distributed by
          RobTop Games: if you use third party content, such as music from your favourite artist,
          you need a separate permission from them.
        </p>
      </div>
    </div>
  </div>
</div>

​
Props Interface

The component accepts one required prop: 
interface Props {
  title: string;
}

​
Styling Features

​
Card Container

.card {
  border-radius: 10px;
  border-width: 2px;
  max-width: 800px;
  margin: 0 auto;
}
Features:
  • Maximum width of 800px
  • Centered with auto margins
  • 10px border radius
  • 2px border width

​
Card Header

.card-header {
  background-color: transparent;
  border-bottom: 2px solid white;
  border-radius: 8px 8px 0 0;
  padding: 1rem;
}

h1 {
  font-size: 2rem;
  font-weight: bold;
}
Features:
  • Transparent background
  • White bottom border (2px)
  • Centered title text
  • Bold, 2rem font size

​
Body Text

p {
  font-size: 1rem;
  line-height: 1.5;
}

​
Bootstrap Classes

The component uses Bootstrap classes:
  • container py-4 - Container with vertical padding
  • card - Bootstrap card component
  • border-white - White border
  • text-white - White text color
  • bg-transparent - Transparent background
  • card-header - Card header section
  • card-body - Card body section
  • text-center - Center-aligned text
  • mb-0, mb-4 - Margin bottom utilities

​
Current Content

The component currently displays RobTop Games’ video monetization policy with four main guidelines:
  1. Allowed: Creating and monetizing Geometry Dash videos
  2. Prohibited: Commercial use of brands and assets (merchandise, SEO manipulation)
  3. Prohibited: Extracting and distributing game assets separately
  4. Reminder: Third-party content requires separate permissions

​
Making it Dynamic

To accept custom content instead of hardcoded policy text:
src/components/Text.astro
---
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<div class="container py-4">
  <div class="card border-white text-white bg-transparent">
    <div class="card-header">
      <h1 class="text-center mb-0">{title}</h1>
    </div>
    <div class="card-body">
      <slot />
    </div>
  </div>
</div>
Usage with custom content:
src/pages/policy.astro
---
import Layout from "../layouts/Layout.astro";
import Text from "../components/Text.astro";
---

<Layout title="Policy Page">
  <Text title="Our Policy">
    <div class="mb-4">
      <p>Your custom content here...</p>
    </div>
    <div class="mb-4">
      <p>More content...</p>
    </div>
  </Text>
</Layout>

​
Alternative: Multiple Props

For structured content sections:
src/components/Text.astro
---
interface ContentSection {
  text: string;
}

interface Props {
  title: string;
  sections: ContentSection[];
}

const { title, sections } = Astro.props;
---

<div class="container py-4">
  <div class="card border-white text-white bg-transparent">
    <div class="card-header">
      <h1 class="text-center mb-0">{title}</h1>
    </div>
    <div class="card-body">
      {sections.map((section, index) => (
        <div class={index < sections.length - 1 ? 'mb-4' : ''}>
          <p>{section.text}</p>
        </div>
      ))}
    </div>
  </div>
</div>
Usage: 
<Text 
  title="RobTop Games: Monetization"
  sections={[
    { text: "You are allowed to create videos..." },
    { text: "You may not make any other commercial use..." },
    { text: "Do not copy or take any assets..." },
    { text: "Please remember that these guidelines..." }
  ]}
/>

​
Customization Examples

​
Different Card Colors

---
interface Props {
  title: string;
  borderColor?: string;
  textColor?: string;
}

const { 
  title, 
  borderColor = 'white',
  textColor = 'white' 
} = Astro.props;
---

<div class="container py-4">
  <div class="card bg-transparent" 
       style={`border: 2px solid ${borderColor}; color: ${textColor};`}>
    <!-- content -->
  </div>
</div>

​
With Subtitle

---
interface Props {
  title: string;
  subtitle?: string;
}

const { title, subtitle } = Astro.props;
---

<div class="card-header">
  <h1 class="text-center mb-0">{title}</h1>
  {subtitle && <p class="text-center mb-0 mt-2" style="font-size: 0.9rem;">{subtitle}</p>}
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us