Elements

Text Formatting

Bold Text

To make text bold, use ** or __ around the word or phrase:
Example: This text is bold or This text is bold

Italic Text

To italicize text, use * or _ around the word or phrase:
Example: This text is italic or This text is italic

Underline Text

To underline text, use HTML <u> tags:

Example:

<u>This text is underlined</u>

Result:

This text is underlined

Strikethrough

To strike through text, use ~~ around the word or phrase:
Example: This text is struck through

Button

<Button label="Example Button" url="/" />
<Button variant="outline" label="With External Link" url="https://astro.build" />
<Button variant="text" label="Example Button" url="/" />

The above code generates the following buttons

Example Button With External Link Example Button

Accordion

<Accordion label="Example Accordion Label 01" group="accordion-01" expanded="true">

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

* **Essentials**: Focused workshop to identify core values and USP.
* **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
* **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

<Accordion label="Example Accordion Label 02" group="accordion-01" expanded="false">

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

* **Essentials**: Focused workshop to identify core values and USP.
* **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
* **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

The above code generates the following accordions

Tab

<Tabs>
  <Tab name="Overview">
    **How Can We Assist You?** We offer personalized consultations to help you
    achieve your personal and professional goals. Choose a tab below to explore
    our services. - Personal Coaching - Career Counseling - Conflict Resolution
    - Life Advice
  </Tab>

  <Tab name="Coaching">
    **Personal Coaching: Unlock Your Potential** Get personalized coaching to
    overcome challenges and set meaningful goals. We focus on: - Confidence
    Building - Emotional Intelligence - Overcoming Procrastination
  </Tab>
</Tabs>

The above code generates the following accordions

Youtube Video

Custom Video

Notice

Blockquote

To create a blockquote, start the line with a >:
Example:

This is a blockquote.
It spans multiple lines.

Author

Code

To format inline code, use backticks (`):
Example: This is inline code

For multi-line code blocks, use triple backticks (```):
Example:

<a
  {...{
    // Set `rel` attribute for external urls or use provided value
    rel: cta_btn.url?.startsWith("http")
      ? cta_btn.rel || "noopener noreferrer"
      : cta_btn.rel || undefined,

    // Set `target` to "_blank" for external urls unless otherwise specified
    target: cta_btn.url?.startsWith("http")
      ? cta_btn.target || "_blank"
      : cta_btn.target || undefined,
  }}
  class="relative flex items-center"
  href={getLocaleUrlCTM(cta_btn.url, Astro.currentLocale)}
>
  <span
    class="btn btn-outline has-text-flip-animation"
    data-content={cta_btn.label}
  >
    {cta_btn.label}
  </span>
  <span class="icon">
    <OptimizedImage
      alt="icon"
      inlineSvg={true}
      class="h-4 w-4 text-white"
      src="/images/icons/svg/arrow-top-right.svg"
    />
  </span>
</a>

Horizontal Rule

To create a horizontal rule, use three or more dashes (---), asterisks (***), or underscores (___) on a new line:
Example:

---

Headings

Create headings by adding # symbols before your text. Add custom class by bracket [.class-name].
Example:

# Heading 1 [.custom-class .another-class]
## Heading 2 [.custom-class .another-class4]
### Heading 3 [.custom-class .another-class]
#### Heading 4 [.custom-class .another-class]
##### Heading 5 [.custom-class .another-class] [.text-h4]
###### Heading 6 [.custom-class .another-class] [.text-h5]

Table

Create tables using pipes (|) and dashes (-):

Example:

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Images

Local Image Remote Image

Components

Styled List

---

<ListCheck>

- **Inconsistent Customer Interactions**: Customers experienced varying levels of service quality across different channels.
- **Lack of Personalization**: Limited data integration led to generic, one-size-fits-all communication.
- **Customer Retention**: Difficulty in retaining customers due to inadequate follow-up and engagement.

</ListCheck>

The above code generates the following styled list

Card Grid

---

<CardGrid>
  <Card
    icon="/images/icons/svg/success.svg"
    title="200+"
    description="Increased Customer Satisfaction"
  />
  <Card
    icon="/images/icons/svg/revenue.svg"
    title="25+"
    description="Enhanced Personalization"
  />
  <Card
    icon="/images/icons/svg/glorify.svg"
    title="10:1"
    description="Improved Retention"
  />
</CardGrid>

The above code generates the following styled block

Gallery With Video

---

<Gallery>
  <GalleryItem
    image_src="/images/gallery/1.jpg"
    image_alt="example alt text"
    video_src="LXb3EKWsInQ"
  />
  <GalleryItem
    image_src="/images/gallery/2.jpg"
    image_alt="example alt text"
    video_src="/videos/test-video.mp4"
    video_provider="html5"
  />
  <GalleryItem
    width="1/2"
    image_src="/images/gallery/3.jpg"
    image_alt="example alt text"
  />
  <GalleryItem
    width="1/2"
    image_src="/images/gallery/4.jpg"
    image_alt="example alt text"
  />
</Gallery>

The above code generates the following gallery images

Testimonial

---

The following code generates the testimonial shown below.

<Testimonial
  customer_image="/images/customers/avatar/1.jpg"
  customer_name="Sarah Jones"
  customer_role="CEO, Founder"
  customer_company_logo="/images/customers/company-logo/acme.png"
  customer_company_name="Acme Inc."
>
  Our partnership with Upstart demonstrates the power of a well-executed
  customer engagement strategy. By integrating advanced technologies and
  data-driven insights, we helped them achieve a more personalized, consistent,
  and rewarding customer experience. At Upstart, we are committed to helping
  businesses like Oloyon revolutionize their customer engagement and drive
  long-term success.
</Testimonial>