Card
LTA’s cards provide a flexible and extensible content container with multiple variants and options.
About
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Example
Built with flexbox, they offer easy alignment and mix well with other components. They have no margin by default, so use spacing utilities as needed.
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.
Card title .lta-card-title
Some quick example text to build on the card title and make up the bulk of the card's content. .lta-card-text
Card linkAnother linkContent types
Cards support a wide variety of content, including images, text, and more. Below are examples of what’s supported.
Body
The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
Header and footer
Add an optional header and/or footer within a card.
Titles, text, links, and some other small components
Card titles are used by adding .lta-card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .lta-card-link to an <a> tag.
Murray and Salisbury narrowly beaten in quarter-finals
Images
.lta-card-img-top places an image to the top of the card. With .lta-card-text, text can be added to the card. Text within .lta-card-text can also be styled with the standard HTML tags. The only purpose of .lta-card-text is to remove the margin of the last element as it handled by the parent.
Images
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Image caps
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
This is some text within a card body.
This is some text within a card body.
Image overlays
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
TODO: Img in card element, body position absolute.
Horizontal
To move the image on top at various breakpoints the classes is-horizontal-{md, xl}, is-vertical-{md, xl} should be used.
See content cards bellow
This is some text within a card body.
Card styles
With colored border
Emma Raducanu Celebrates Her Victory | 2021 US Open
Emma heads up to her box to celebrate after winning the 2021 US Open.
Content Cards
Murray and Salisbury narrowly beaten in quarter-finals
Andy Murray and Joe Salisbury exited the men’s doubles event in the 2020 Tokyo Olympics following a tight 4-6 7-6 (2) 10-7 loss against Croatian pair Ivan Dodig and Marin Cilic.
Murray and Salisbury narrowly beaten in quarter-finals
Andy Murray and Joe Salisbury exited the men’s doubles event in the 2020 Tokyo Olympics following a tight 4-6 7-6 (2) 10-7 loss against Croatian pair Ivan Dodig and Marin Cilic.
Match Status
beat Jonathan Wallace
6-4, 1-6, 7-68-6, 6-3
beat Jonathan Wallace
6-4, 1-6, 7-68-6, 6-3
Recent matches
Search Results Cards
Find a coaching Job
Club Coach
Min.Qualificationlevel3
Min.AccreditationAccredited
Job TypePart-time
Find a coaching Job With Image
Full Time Coach - David Lloyd Southampton West End
Min.QualificationLevel3
Min.AccreditationLTA Accredited+
Job TypeFull Time (21 hours or more a week)
Find a CPD course
Coach Better Doubles
PriceÂŁ50
Duration4 hours
Credits4 Coach & Official
Course TypeQualifications
Global Search
Emma Raducanu becomes the new British No.1 after US Open title run
Emma Raducanu is the new British No.1 - rising 127 places to World No.23 following her title run at the US Open.
Emma Raducanu becomes the new British No. 1 after US Open title run
MAJOR EVENTS
Australian Open
Australian Open
Murray and Salisbury narrowly beaten in quarter-finals
Andy Murray and Joe Salisbury exited the men's doubles event in the 2020 Tokyo Olympics following a tight 4-6 7-6 (2) 10-7 loss against Croatian pair Ivan Dodig and Marin Cilic.
Murray and Salisbury narrowly beaten in quarter-finals
Andy Murray and Joe Salisbury exited the men's doubles event in the 2020 Tokyo Olympics following a tight 4-6 7-6 (2) 10-7 loss against Croatian pair Ivan Dodig and Marin Cilic.
Murray and Salisbury narrowly beaten in quarter-finals
Andy Murray and Joe Salisbury exited the men's doubles event in the 2020 Tokyo Olympics following a tight 4-6 7-6 (2) 10-7 loss against Croatian pair Ivan Dodig and Marin Cilic.
Murray and Salisbury narrowly beaten in quarter-finals Murray and Salisbury narrowly beaten in quarter-finals Murray and Salisbury narrowly beaten in quarter-finals Murray and Salisbury narrowly beaten in quarter-finals Murray and Salisbury narrowly beaten in quarter-finals Murray and Salisbury narrowly beaten in quarter-finals Murray and Salisbury narrowly beaten in quarter-finals Murray and Salisbury narrowly beaten in quarter-finals
Murray and Salisbury narrowly beaten in quarter-finals
LTA PAIR AND PLAY
Pair & Play is doubles tennis with double the fun. Held weekly, the programme is designed to help women improve their skills and confidence on the court.
PAIR AND PLAY
Pair & Play is doubles tennis with double the fun. Held weekly, the programme is designed to help women improve their skills and confidence on the court.
View morePAIR AND PLAY
Pair & Play is doubles tennis with double the fun. Held weekly, the programme is designed to help women improve their skills and confidence on the court.
View moreWest Green Higher Red Ground
Sussex, SW15 6NG