TA Design Guidelines
Spacing
We use the Small as section height in most cases in most cases.
Block Section: Hover over the section > Edit Content > Format > Height > S or M
(For Auto Layout section: Edit Content > Design > Size & Space >Vertical Padding)
There are no blank lines at the top and bottom edges of the section.
Apart from some text blocks such as the centered title, almost all blocks are close to the edges of the section, without any extra white space columns.(For some Auto Layout section: Edit Content > Design > Size & Space > Layout Width > Insert)
After editing the desktop version, remember to check the section spacing on mobile as well.
Text
1.Extend the width of the text block to accommodate different screen widths.
2. Drag to adjust the block's height and avoid blank lines.
3. To save on editing costs, you can place content from the same column in the same text block. For less space between lines, add a line break by pressing Shift + Enter
This is the spacing of
Shift
This is the spacing of
Shift + Enter
4. In most cases, don’t make text blocks overlap. You can use Align Vertically or Text Alignment to adjust their position.
* Most Heading 4 titles need to be vertically centered in the mobile version.
5. When adjusting the text height for certain card designs, remember to keep the card background shape’s height consistent once changed.
* How to add a card background: Add block >Shape
Fill out form
New Yorkers who have a bike to donate or who need a bike to get around the city, can fill out a simple form.
Fill out form
New Yorkers who have a bike to donate or who need a bike
Image
Replace an image:
Click the image block, Edit > Content > Replace
*If the image does not automatically fill the image block, Edit > Design > Fill
Fit
Fill
Moving the focal point to adjust the display position of the image: Edit > Design > drag the white dot at the center of the image.
Set a banner background image with overlays
Hover over the section > Edit Section > Background > Image, scroll down, and you can change the overlay's opacity.
Adjust the color of the overlay, Edit Section > Colors (Lightest 1: white; Lightest 2: black)
Button
Primary
Secondary
Fill
We recommend using Fill, Edit > Design > Fill
Extend the width of the fill button block to accommodate different screen widths.
Extend the height of the button block for more space.
Tertiary
Fit
When you need two buttons of the same length side by side and custom the length, you can use Fit.
Click the pencil icon on the block > Content > Gear Icon > File > scroll down > Upload File > *Enables Open in New Window
If it's an internal link, there's no need to open a new window. If it leads to an external website, a new window should be opened because once redirected, it's difficult to return to the TA site.
Click the pencil icon on the block > Content > Gear Icon > Web Address > *Enables Open in New Window
Color
Change the section’s background color: Hover over the section > Edit Section > Colors
You can choose from 8 color palettes, but typically we only use the first four.
The Brightest 1 includes blue colors for Bike Match page.
Lightest 1
Biking Match
How does bike match work?
Fill out form
New Yorkers who have a bike to donate or who need a bike to get around the city, can fill out a simple form.
Stay tuned for our response
.We'll pair you with a neighbor of about the same height.
Arrange a time
Two of you can arrange a time to exchange the bike in an open-air public place.
Lightest 2
Biking Match
How does bike match work?
Fill out form
New Yorkers who have a bike to donate or who need a bike to get around the city, can fill out a simple form.
Stay tuned for our response
.We'll pair you with a neighbor of about the same height.
Arrange a time
Two of you can arrange a time to exchange the bike in an open-air public place.
Lightest 3
Biking Match
How does bike match work?
Fill out form
New Yorkers who have a bike to donate or who need a bike to get around the city, can fill out a simple form.
Stay tuned for our response
We'll pair you with a neighbor of about the same height.
Arrange a time
Two of you can arrange a time to exchange the bike in an open-air public place.
Lightest 4
Biking Match
How does bike match work?
Fill out form
New Yorkers who have a bike to donate or who need a bike to get around the city, can fill out a simple form.
Stay tuned for our response
We'll pair you with a neighbor of about the same height.
Arrange a time
Two of you can arrange a time to exchange the bike in an open-air public place.
Brightest 1
Biking Match
How does bike match work?
Fill out form
New Yorkers who have a bike to donate or who need a bike to get around the city, can fill out a simple form.
Stay tuned for our response
We'll pair you with a neighbor of about the same height.
Arrange a time
Two of you can arrange a time to exchange the bike in an open-air public place.