React Components

# Text

## Overview

---

## Anatomy

---

Text

---

## Text

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [text elements attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label#attributes) . |
| 
as

 | `string` | - | `undefined` | Pass a HTML tag you may want to use instead of the preset one. Useful for example to apply heading style to a non-heading element. |
| 

disabled

 | `boolean` | - | `undefined` | Whether the text is displayed in a disabled context. |
| 

preset

 | `TEXT_PRESET` | - | `TEXT_PRESET.paragraph` | The text preset to use. |

## Enums

---

### TEXT_PRESET

-   blockquote =`"blockquote"`
-   caption =`"caption"`
-   code =`"code"`
-   heading1 =`"heading-1"`
-   heading2 =`"heading-2"`
-   heading3 =`"heading-3"`
-   heading4 =`"heading-4"`
-   heading5 =`"heading-5"`
-   heading6 =`"heading-6"`
-   label =`"label"`
-   paragraph =`"paragraph"`
-   small =`"small"`
-   span =`"span"`

## Examples

---

### Default

```jsx
{
  globals: {
    imports: `import { Text } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.    </Text>
}
```

### Preset

**Caption** preset can be used should you need ODS caption custom style.

For actual `<caption>` (used in a table) or `<figcaption>` (image), use the native tag using either an OdsText inside of it or the Saas mixin.

```jsx
{
  globals: {
    imports: `import { TEXT_PRESET, Text } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Text preset={TEXT_PRESET.blockquote}>Blockquote</Text>
      <Text preset={TEXT_PRESET.caption}>Caption</Text><br />
      <Text preset={TEXT_PRESET.code}>Code</Text><br />
      <Text preset={TEXT_PRESET.label}>Label</Text>
      <Text preset={TEXT_PRESET.paragraph}>Paragraph</Text>
      <Text preset={TEXT_PRESET.small}>Small</Text><br />
      <Text preset={TEXT_PRESET.span}>Span</Text><br />
      <Text preset={TEXT_PRESET.heading1}>Heading-1</Text>
      <Text preset={TEXT_PRESET.heading2}>Heading-2</Text>
      <Text preset={TEXT_PRESET.heading3}>Heading-3</Text>
      <Text preset={TEXT_PRESET.heading4}>Heading-4</Text>
      <Text preset={TEXT_PRESET.heading5}>Heading-5</Text>
      <Text preset={TEXT_PRESET.heading6}>Heading-6</Text>
    </>
}
```

### Disabled

```jsx
{
  globals: {
    imports: `import { Text } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Text disabled>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.    </Text>
}
```

### Caption preset in <table>

```jsx
{
  globals: {
    imports: `import { TEXT_PRESET, Text } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <table style={{
    border: '2px solid rgb(140 140 140)',
    borderCollapse: 'collapse'
  }}>
      <caption style={{
      captionSide: 'bottom'
    }}>
        <Text preset="caption">
          My table title        </Text>
      </caption>
      <thead>
      <tr>
        <th scope="col">Person</th>
        <th scope="col">Age</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <th scope="row">Chris</th>
        <td>22</td>
      </tr>
      </tbody>
    </table>
}
```

### Caption preset in <figcaption>

```jsx
{
  globals: {
    imports: `import { TEXT_PRESET, Text } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <figure>
      <img alt="OVHcloud logo" src="https://images.crunchbase.com/image/upload/c_pad,h_256,w_256,f_auto,q_auto:eco,dpr_1/ayzwkdawmlyzvuummuf4" style={{
      height: '100px'
    }} />
      <figcaption>
        <Text preset={TEXT_PRESET.caption}>
          My picture title        </Text>
      </figcaption>
    </figure>
}
```

### Preset style on a different HTML element

```jsx
{
  globals: {
    imports: `import { TEXT_PRESET, Text } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Text as="span" preset={TEXT_PRESET.heading5}>
      I am a &lt;span&gt; using the heading5 preset style.    </Text>
}
```

## Recipes

---

Chat

Assistant2:59 PM

Welcome to the Chat recipe. Feel free to test the UI behavior by typing anything on your mind below.

Config Tile

VPS 1

4 vCore8 Go RAM100 Go 1 day automated backup Unlimited traffic 200 Mbps

12 months6 monthsNo commitment

From€24.46ex. VAT/monthor €13.19 incl. VAT/month

Dashboard Card

#### Cluster Information

---

Name

MyCluster

---

ID

---

Region

GRA91-AZ

---

Admission plugins

Always Pull Images PluginEnable

Plugin Node RestrictionEnable

---

Email Field

Email- mandatory

@

.fr.com.dev

The part before the email address (the text before the @) must follow these guidelines:

-   It must end with a letter or a number
-   Allowed special characters are: ".", "_", "-"
-   Special characters cannot be placed next to each other

Feature List

-   Memory: up to 1.5 TB
    
-   SLA: 99.99%
    
-   Guaranteed public bandwidth from 5 Gbps to 25 Gbps
    
-   25 Gbps private bandwidth included
    
-   OVHcloud Link Aggregation
    

Feature List Product Card

WEB HOSTING

NewBest seller

Performance

For demanding online stores and projects.

1 vCore 2,4 GHz, 2 Go RAM1 vCore 2,4 GHz, 4 Go RAM2 vCores 2,4 GHz, 8 Go RAM

From

€24.46ex. VAT/month

or €13.19 incl. VAT/monthfor a 24-month registration

Minimum 2-year registration €100 free with a 5-year registration

Installation fee:Free

-   -   Unlimited websites
        
    -   High power level
        
    -   1 domain name free for the first
        
    -   500 GB SSD storage
        
    -   1,000 email addresses
        
-   1-click CMS
    
    -   WordPress
        
    -   Joomla!
        
    -   Drupal
        
    -   Prestashop
        
-   Database
    
    -   4 x 1 GB databases
        
    -   8 GB Web Cloud Databases
        
-   Security
    
    -   Unlimited free SSL
        
    -   Anti-DDoS protection
        
    -   Anti-virus and anti-spam
        
    -   Daily backups
        
-   Performance
    
    -   99.9% observed availability
        
    -   Guaranteed resources
        
    -   Unlimited traffic
        
    -   Service continuity
        
    -   Boost option to withstand temporary traffic spikes
        
-   Support and additional services
    
    -   Git
        
    -   Standard support
        
    -   SSH access
        
    -   CDN Basic
        

Media Product Card

AI Deploy

Easily deploy machine learning models and applications into production, create your API access points with ease, and make effective predictions.

Status Modal